Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Regular Coder
    Join Date
    Aug 2009
    Posts
    401
    Thanks
    118
    Thanked 0 Times in 0 Posts

    Need background to stretch across the page

    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.

  • #2
    New Coder
    Join Date
    Aug 2011
    Posts
    23
    Thanks
    0
    Thanked 2 Times in 2 Posts
    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:
    Code:
    .headerImage
    {
       background:url('http://www.willowbilliards.com/wp-content/uploads/site-elements/banner-bg.jpg') repeat-x;
       margin-top:-15px;
    }
    .headerSpacer
    {
       height:100px;
    }
    Code:
    <div class="headerImage">
       <div class="headerSpacer"></div>
       ...(markup for menu here)..
       <br />....
    </div>

  • Users who have thanked chaule for this post:

    sixrfan (09-05-2011)

  • #3
    New Coder
    Join Date
    Oct 2007
    Posts
    49
    Thanks
    2
    Thanked 1 Time in 1 Post
    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...

  • Users who have thanked mlg5454 for this post:

    sixrfan (09-05-2011)

  • #4
    Regular Coder
    Join Date
    Aug 2009
    Posts
    401
    Thanks
    118
    Thanked 0 Times in 0 Posts
    got it. thanks!

  • #5
    Regular Coder
    Join Date
    Aug 2009
    Posts
    401
    Thanks
    118
    Thanked 0 Times in 0 Posts
    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...
    Code:
    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?
    Code:
    body {background: url(images/bg1.jpg) repeat-x left top url(images/bg2.jpg;}
    please advise. thanks in advance.

  • #6
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    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:

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


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •