...

View Full Version : Background image



toothmkr57
10-06-2007, 03: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?

vtjustinb
10-06-2007, 04: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; }

<body>
<div id="wrapper">
</div>
</body>

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

toothmkr57
10-06-2007, 06: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?

jlhaslip
10-06-2007, 11:55 PM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum