Need background to stretch across the page

Discussion in 'CSS' started by sixrfan, Sep 4, 2011.

  1. #1
    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.
     
    Solved! View solution.
    sixrfan, Sep 4, 2011 IP
  2. hdewantara

    hdewantara Well-Known Member

    Messages:
    538
    Likes Received:
    47
    Best Answers:
    25
    Trophy Points:
    155
    #2
    Have you tried set one as the <HTML> background, and the other as the <BODY> background?
    Sadly I'm not accustomed to Wordpress, so am not sure how to do this the WordPress way...:D
     
    hdewantara, Sep 5, 2011 IP
  3. xluciusx

    xluciusx Peon

    Messages:
    470
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #3
    From the Wordpress themes I've seen do a full background stretch, they've been utilizing a lightweight jquery script to perform the function you need. That may be a solution for you.
     
    xluciusx, Sep 7, 2011 IP
  4. aap

    aap Well-Known Member

    Messages:
    1,802
    Likes Received:
    39
    Best Answers:
    2
    Trophy Points:
    120
    #4
    Edit body style of your theme.

    Something like this:
    
    body{
    background: url(images/bg.jpg) repeat-x;
    }
    
    Code (markup):
     
    aap, Sep 7, 2011 IP
  5. sixrfan

    sixrfan Well-Known Member

    Messages:
    354
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    101
    #5
    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;}
    
    Code (markup):
    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;}
    
    Code (markup):
    please advise. thanks in advance.
     
    sixrfan, Sep 8, 2011 IP
  6. #6
    radiant_luv, Sep 8, 2011 IP
  7. sixrfan

    sixrfan Well-Known Member

    Messages:
    354
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    101
    #7
    got it. thanks.
     
    sixrfan, Sep 9, 2011 IP