...

View Full Version : Need background to stretch across the page



sixrfan
09-05-2011, 03:43 AM
Any idea what css element I can apply a background to, and how to apply it, in order to get this image (http://www.willowbilliards.com/wp-content/uploads/site-elements/banner-bg.jpg) to repeat-x across the top of the page on this site (http://www.willowbilliards.com)?

The problem is that I already have a background image applied to the body so that I can get that green felt to repeat across the rest of the page.

Please advise. Thanks in advance.

chaule
09-05-2011, 05:28 AM
Hi,

Not sure if this is the best way but maybe put it as a div at the top of the page. If you want your menu to sit infront of the lower part of the image put it within the div a couple of lines down.

Maybe something like:

.headerImage
{
background:url('http://www.willowbilliards.com/wp-content/uploads/site-elements/banner-bg.jpg') repeat-x;
margin-top:-15px;
}
.headerSpacer
{
height:100px;
}


<div class="headerImage">
<div class="headerSpacer"></div>
...(markup for menu here)..
<br />....
</div>

mlg5454
09-05-2011, 05:52 AM
do you want the new brick image to replace the old brick image behind the text of the page? in that case you need a new graphic.

in any case, like the person above me has said, you need a new div, and to say background: url(-that image-) repeat-x; , and the div should be the height and width of that original image... something like that...

sixrfan
09-05-2011, 02:59 PM
got it. thanks!

sixrfan
09-08-2011, 02:59 PM
i have a followup question...

you know how its possible to setup a body background so that an image repeats, then when it stops repeating, a color fills the rest like this...


body {background: url(images/bg.jpg) repeat-x left top #FFFFF;}


well is it possible to have a different image fill the rest of the space after the first stops repeating? maybe something like this?


body {background: url(images/bg1.jpg) repeat-x left top url(images/bg2.jpg;}


please advise. thanks in advance.

vikram1vicky
09-08-2011, 09:10 PM
If you wil correct and valid cSS properties, It won't happen that, image will not repeat for full page...

You should give background color matching your background image, in case image won't loaded properly, you design wont messed up .

For example, if your background image is of dark color and font is white/light color... in case background image is missing, you light font wont be visible...

So, its better to define matching color with background image...

Following is the valid sample code:


body {
background:#f00 url(images/imgname.png) repeat;
}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum