|
CSS - Repeat Image 100% Height In Css
Similar TutorialsHi 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 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. 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 Hey 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 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 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> 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 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, I am trying to automate everything on my test website and I have one more angle to cover. In effect, I want to adjust the line-height property (which I can do) based on the number of files within a specific folder (PHP and already done). The more files in the folder, the lower the line-height value must be. This is to ensure if I copy additional files into the folder, then the navigation menu (which is PHP reading files in this particular folder) will alter the CSS line-height property accordingly to ensure it can never exceed a certain height. Sounds wierd? go to www.re3.org.uk (next to the RE3 image, I have a list of hyperlinks which are obtained from files within the folder) My problem, when adjusting the CSS property (which is set as cm in *.css file) in javascript, it doesn't correspond correctly, the line-height property in javascript doesn't appear to be work in cm but some other measurement. Does anyone know how to change what unit of measurement Javascript works in? Or does anyone know what unit of measurement javascript uses when adjusting line-height / line-width values? I want to create a mini-algorithm that works out the appropriate line-height based on the image height (got that already) and the number of files in the folder (got that too) so the menu automatically adjusts to fit. Whew! 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 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 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 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. It seem that everytime I added the image tag, the div'x area get bigger in IE but not in Mozilla/Firefox browser. So, I thought by added the "margin-bottom:-360px;" to the div would fix it but it had an opposite effect. Meaning it worked in IE but Mozilla show a vertical scrollbar. So, does anyone know how can I make the <img> overlap one another without being stacked on one after another in height for IE if I take out the "margin-bottom: -360px;"? Thanks... Code:
div.divBox1
{
width: 286px;
height: 359px;
float: left;
}
div.divClearFloat
{
clear: both;
height: 0px; /* For IE Stupidity (it added some spaces after clearing the float) */
font-size: 1pt; /* For IE Stupidity (minimum height only work with current font-size somewhere) */
}
div.divDottedLineAdvertisementSeperator1
{
width: 575px;
height: 3px;
background-color: #ff0000;
font-size: 1pt; /* For IE Stupidity (minimum height only work with current font-size somewhere) */
}
Code: <div class="divBox1"> <div style="margin-bottom:-360px;"> <img src="images/doctor.jpg" style="position:relative;top:0px;left:0px;z-index:2;"> <img src="images/we_help.jpg" style="position:relative;top:-360px;left:0px;z-index:1;"> </div> </div> <div class="divClearFloat"></div> <div class="divDottedLineAdvertisementSeperator1"></div> 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, 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 |
|||||||