Basic HTML/CSS background repeating help!

NeoVo · 30 Jan 2012 at 04:41

Hi all, first time I've had to use this forum for help, but something which should be quite simple has got me slightly stumped.

I have a basic html/css web layout, and i have a background image that i want repeated along the whole of the websites height value (its set to auto to adapt to contents). However I would prefer the background for the footer section to be different, however the footer background inherits the background from the other, and as a result overlaps and prevents the desired affect.

I've tried removing the footer from the main div, which worked but then caused other issues.

I've created a simplified version of my site here to better explain, (the stylesheet is bloated because i havent modified it).
Im finding it quite hard to explain so hopefully someone can see it for themself and help me out.

Thanks in advance!

AHarvey · 30 Jan 2012 at 04:49

just copy the CSS code for the background image you use, paste that inside the CSS for the footer div and point it to the new background image you want to use.

I think that should do it

NeoVo · 30 Jan 2012 at 04:53

The problem is.. the y_background.png image is a 1000 x 1 pixel image which is repeated along the y axis, so it continues along the entirety of the main site structure, the problem is i dont want it to do so for the footer section. If i add another background image, it doesnt remove it, it prints on top of it and because both have sub 100 opacity it looks silly.

gord · 30 Jan 2012 at 10:09

Do you have any need to use transparent PNGs for it? Does your background colour change? If not you can just use JPGS.

If so then you'll have to take your footer out of your container with the background and duplicate some of the CSS. When I say duplicate some of the CSS, you should be applying as many shared styles as you can to the containers and then set the backgrounds on individual elements.