|
CSS - Css Setup For No Repeat Bg Image In Cell
Hi
XP pro SP2 Macromedia dreamweaver CS3 Found this solution for setting the position of a background image in a cell. I am mostly busy with firefox amd ieexplorer 6 to,... what is the beat 8 ? Select the cell. Then in Properties specify the background image. It'll repeat, but if you now set up a CSS for the TD tag and select 'no repeat', it'll go back to one image. You can also set the position in the same window. I'm sure the experts will say it's a scrappy way of solving the problem, but it works. And that's what counts. The other advantage is that you can have different images in each cell. This seems like an easy way to do it, but how do I set up a CSS for the TD tag for this specific cell? Lynghonning :-) td.special { background-repeat:no-repeat; background-image: url(pakke.jpg); } .... <td class="special"> Note - no caps on 'special'. I cant get it to work. Also the code I found here conserning BG images for netscape didnt do it either. Any suggestions greatly appreciated. Cheerio Chris Similar TutorialsHey there, thanks for any help in advance. I'm struggling to understand why an image is repeating even though I have it set to no-repeat. Any idea what's going on and how I can fix? Here is the site: 168.144.130.40:8080 The image that is repeating is the girl blowing bubbles: images/bath.jpg Thanks!! Matt currently i just use Code: background-image: url(images/layout/mem.png); to show an image as the background of a div, but if the image is smaller than the div it repeats. How do i stio it from repeating Hi everybody, i need some help figuring out some things with css and html: This is the CSS part of the code <style> .leftbanner{ background:url(leftbanner.jpg), right, repeat-y; } .topbanner{ height:100%; width:100%; background:url(topbanner.jpg), bottom, repeat-x; } body{ margin:0px; } this is the cell that i want the topbanner class to be used on. there are two more images in that cell but the strange thing for me is that i dont get any background image?!? any help ? <td colspan="2" align="center" valign="bottom" class="topbanner"> <img src="spacer40jpg" width="100%" height="1"> <br> <img src="kormrez.jpg" width="451" height="85"></td> have it display one on bottom left AND one bottom right? They are the same image, I just need it on both sides if possible. I'm having a problem with my background image showing through under two floats (left and right), as you can see here . The CSS code I'm using to accomplish this is: Code:
#webupdates {
position: relative;
float: left;
width: 219px;
min-height: 260px;
background-color: #5A759F;
}
#webcontent {
position: relative;
float: right;
width: 537px;
min-height: 260px;
background-color: #DFE2E8;
}
#flashlogo {
position: relative;
width: 778;
height: 219;
}
#content_table {
margin: 0 auto;
width: 778px;
background: #FFFFFF url(images/bg.jpg) repeat-y !important; All that shows up is the white BG. :(
}
And the portion of code I'm dealing with is: Code: <body style="background-color: #404044;">
<div id="content_table">
<div id="flashlogo">
...
</div>
upper navigation images
<div id="webupdates">
...
</div><div id="webcontent">
...
</div>
<br />
<img src="images/bar_bottom.jpg" alt="" />
</div>
</body>
Thank you so much in advance for your help. I've been at this for hours. Hi there, I am helping a friend with a site of his. Basically, the problem is that an title-header image keeps getting repeated down the page when a page is more than a certain length. The page I am referring to is..... http://www.darajewelry.com/Merchant...ge=DJ/CTGY/IG-N If you scroll down, you will notice the brown bar repeating itself. The CSS code currently is: Code: body {
background-image: url(graphics/00000001/bkgrd.gif);
margin-left: 0px;
margin-top: 0px;
margin-right: 20px;
margin-bottom: 0px;
}
Now I thought adding : background-repeat: no-repeat; would solve it like below: Code: body {
background-image: url(graphics/00000001/bkgrd.gif);
background-repeat: no-repeat;
margin-left: 0px;
margin-top: 0px;
margin-right: 20px;
margin-bottom: 0px;
}
But that doesn't work. The image doesn't even appear. As I'm relatively new to working with CSS, could some point me in the right direction. Many thanks! Nathan Hi there. I would like to show some panoramas. My panos vary in size but all are wider than one screen can show (lets say 1800x200px). Am still working with such small screens 1024px ;-) So horizontal scrolling is necessary (that's ok so far). On top and on bottom of the pano I want to show a border. The borders should be visible from far left to far right end of the pano. The upper border works already (even with fixed background image). See the attachment "css.zip": Code: <style type="text/css">
<!--
body {
background-color: black;
margin: 50px 0;
background-image: url(stribes_01.gif);
background-repeat: repeat-x;
background-attachment: fixed;
}
img {
margin: 10px;
}
-->
</style></head>
<body>
<img src="eyecatcher03.jpg" width="1800" height="200" />
</body>
</html>
So I would like to have the bottom border work, too. It should go from far left to far right of the pano having the same distance from pano than top border does have. I know that it is possible to repeat a background image like this: Code: background-image: url(stribes_02.gif); background-repeat: repeat-x; But the image is only repeated up to the right browser border. There will be a remaining gap from browser border to far right end of pano. Is there a way to realise this? Any idea is highly appreciated. Thanks. tigercat. Hello I have a small image. What I want to do is use the image as a background image, but only display a small section of that image and repeat that section over and over, depending on how much content is on top of the image. I hope I made that clear enough to understand. I have the following code: Code:
<style>
.vote {
background-image: url('images/vote.gif');
background-repeat: repeat-y;
background-position: 0 -45;
height: 50px;
width: 199px;
}
</style>
<div class="vote">
d<br /><br /><Br /><br /><BR /><BR /><br /><br /><br /><br />j
</div>
That code displays only part of the image, as I want it to, however, I do not know if it is possible to now repeat just that section of the image again and again. I hope someone understands and can help. Thanks Hi, I have a div layer, and I have set the background colour of this layer to purple. Now the height of this image various according to it content. However I would like that the bottom part of the image is made from a faded image. So far I have accomplished this by using an external image. However I would like to use the background: url(...) in CSS instead. Is this possible? Can I repeat an image only at the bottom part of a div in CSS? Thanks and Regards, Sim085 Hi all. This is my first time posting ever so please be gentle. On my website I have background image with stripes and grey. I want it to go all the way down the bottom of the page. Currently the background image stops where the content ends. I have tried height:100%; and that solves the problem, but creates another if the user has a smaller browser window. Can someone please help me out? Page URL: leannemarie.com/testing_index.php CSS: leannemarie.com/css/testing_main.css Thanks LeAnne I want to center my site, which I have found I can do by giving an absolute position to the main content area - but I also want to repeat an image in the background behind the main content, and I cannot do the both and prevent some empty white space at the top of the page. Can you help? (I am new at this.) What am I doing wrong? So, to recap: I want a centered site, an image behind the main content area, and no empty white space in the browser above my bg image. I am currently using IE (7). TIA. #body { margin: 0px; padding: 0px 10px 0px 10px; width: 100%; background: #ff9900 url('bg_repeat.jpg') repeat-x; } #container { top: 0px; left: 0px; padding: 0px 10px 10px 10px; margin: 0 auto; --> this will center my site, but I still cannot see the bg image stated in the body div border-right: #ffff99 solid 1px; border-left: #ffff00 solid 1px; background: #fff; width: 75%; } Hi, I want to repeat a background image (actually, its just a colour) from 50% of the page. i.e. I want one side of my site to be of blue background (the left 50%) and the other side to be of grey background (the right 50%). | Blue | Grey | | Blue | Grey | | Blue | Grey | | Blue | Grey | So let's say the background of my site is blue all over. Code: <body> <div id='greybg'> </div> </body> But the particular div is set to something like: Code:
#greybg {
background-image: url("../images/body/greylong.gif");
background-repeat: repeat-x;
background-position: 50% 0%;
}
This code doesn't work though. The repeat-x property makes it repeat all throughout, whereas what I want is for the image to repeat STARTING FROM 50% of the middle of the page (i.e. the second 50% column of the page). Any way I can achieve this? TIA heloo geniuses. please to someone helping me for preventing more of the hair pulling out. I am trying to figure out how to repeat a border image, basically to repeat the div holding the wood images on this page: http://greentypeoftube.com/kc/ essentially to have the bottom expand with the user's browser window size. thanks to you for the thinking and the helping of me with it. s oh. also I am hoping for a way to show the scroll buttons only if the text [will be in another div being cropped by the content window}. is there a way to do this with css? I am working much very hard to be more with css to design than just designing it. Hello everybody, I used the following line <td width="8" background="<?php print $image; ?>" height="15" style="background-repeat: no-Repeat"></td> and it worked well for IE, but in Mozilla the image wasn't displayed properly, so I used the following line for Mozilla: <td width="8"> <img src="<?php print $image; ?>" width="8" height="15" style="background-repeat: no-Repeat"> </img> but now the "style" property does not work, and there is a back ground repeat, how can I avoid the background repeat in Mozilla? Hi. I've got a question regarding placing an image within a table cell and using CSS to achieve a certain result. The table cell's width is determined at 530px, but the height is dependent on the actual length of the copy. What I'm looking to accomplish is have an image ghosted in the background of the text. It is supposed to appear in the lower right hand corner of the cell. I've already created the image with a transparent background, but it's not implementing correctly. Can I use a Z-Index style to achieve the item being placed under the text? Also, how do I make sure that the image is positioned in the lower right hand corner of the cell regardless of the height of the cell? Thanks! Simon315 Hi there, I'm trying to figure out how to put a background image in my cell and have it not repeat. I've seen a couple ways of doing this with CSS, but everytime I try it applies it to the surrounding cells (fills the table). So, I tried to make a seperate table inside my cell and apply it and it still runs into the surrounding table. Not sure if anyone can understand, it's hard to describe. But I'm looking for a resolution of some sort. Thanks I have searched around, but nothing has yet fixed my problem. I have a table. I want one of the cells to have a white background, a black border and rounded corners. However, when I try to place the curve images in the corner, they jump to the corners of the table and not the cell. Can anyone spot my mistake/guide me to a higher level of understanding? Thanks in advance. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Test</title>
<style type="text/css">
div.RedTable {
position: relative;
width: 700px;
min-height: 500px;
background-color: #8B0000;
border: 2px solid black;
}
td.ContentWindow {
position: relative;
background-color: white;
border: 2px solid black;
padding: 10px;
margin: 10px;
}
img.WindowULCorner {
position: absolute;
top: -2px;
left: -2px;
}
img.WindowURCorner {
position: absolute;
top: -2px;
right: -2px;
}
img.WindowLLCorner {
position: absolute;
bottom: -2px;
left: -2px;
}
img.WindowLRCorner {
position: absolute;
bottom: -2px;
right: -2px;
}
</style>
</head>
<body>
<div class="RedTable">
<table summary="" width="100%">
<tr>
<td class="ContentWindow">
<img class="WindowULCorner" src="images/white_UL.gif" alt="" />
<img class="WindowURCorner" src="images/white_UR.gif" alt="" />
<img class="WindowLLCorner" src="images/white_LL.gif" alt="" />
<img class="WindowLRCorner" src="images/white_LR.gif" alt="" />
filler text 1
</td>
<td style="width: 35%;">
filler text 2
</td>
</tr>
</table>
</div>
</body>
</html>
Hi, Does anyone have any ideas or fixes to get an image to be 100% height of a table cell in IE. (XHTML Transitional) Here is an example http://www.degs.co.uk/test/css/height.htm Works fine in Mozilla/Firefox & Opera Code: html {
height: 100%;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000000;
background-color: #FFFFFF;
height: 96%;
}
table {
padding: 0px;
height: 100%;
width: 700px;
border: 1px solid #000000;
}
.vdivider {
width: 5px;
height: 100%;
}
Cheers, Degs |
|||||||