View Full Version : Background image

10-06-2007, 04:44 AM
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...

<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?

10-06-2007, 05:47 AM
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:

body { background: url(Image/background-x.png) left top repeat-x; }
#wrapper { background: url(Image/background-y.png) left top repeat-y; }

<div id="wrapper">

10-06-2007, 07:20 AM
definitely makes good sense, I'll try it!

10-06-2007, 07:24 AM
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?

10-07-2007, 12:55 AM
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.