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 5 of 5
  1. #1
    New Coder
    Join Date
    Jul 2007
    Posts
    56
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Background image

    I have a background image in the css already, it repeats x across the top. I am wanting another background image for the whole body. This is what I came up with but it doesn't work...

    Code:
    <body background="Image/background-fill.png" style="background-position: top left; background-repeat:repeat-x repeat-y;">
    Is there anyother way to make this work?

  • #2
    Regular Coder
    Join Date
    Sep 2007
    Location
    Raleigh, NC
    Posts
    273
    Thanks
    7
    Thanked 59 Times in 52 Posts
    If i'm understanding you right, you can take a tile and repeat it in both x and y directions by just specifying "repeat" instead of "repeat-x":

    <body style="background: url(Image/background-fill.png) left top repeat">

    If you want a separate image on the body (one to repeat-x at the top, and one to repeat-y in the content) you'd want to simply add another div, and put one background on the "body" tag, and the other background on the wrapper div:
    Code:
    body { background: url(Image/background-x.png) left top repeat-x; }
    #wrapper { background: url(Image/background-y.png) left top repeat-y; }
    
    <body>
       <div id="wrapper">
       </div>
    </body>

  • #3
    New Coder
    Join Date
    Jul 2007
    Posts
    56
    Thanks
    2
    Thanked 0 Times in 0 Posts
    definitely makes good sense, I'll try it!

  • #4
    New Coder
    Join Date
    Jul 2007
    Posts
    56
    Thanks
    2
    Thanked 0 Times in 0 Posts
    worked brilliantly! However now the original background image across the top of the page is overtaken by the current body tiling. Is this a situation that I need to used the z-index?

  • #5
    Regular Coder
    Join Date
    Feb 2007
    Location
    Canada
    Posts
    924
    Thanks
    10
    Thanked 56 Times in 55 Posts
    You can't have two backgrounds on the Body, so place the top repeat-x background on a 'wrapper' div, background-color: transparent should work, which should be 'above' the body.


  •  

    Posting Permissions

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