Need background to stretch across the page

[sixrfan]

Any idea what css element I can apply a background to, and how to apply it, in order to get this image to repeat-x across the top of the page on this site?

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]

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]

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]

got it. thanks!

[sixrfan]

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]

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;
}