CSS bg image

[mufaddal]

Hello,
my website has 3 sections. header – content – footer. I have a bg image to display in my header and footer section which touches the two end of the browser no matter about the screen resolution. my content height is not fixed through entire website.. please help me with any css code or javascript code to resolve this problem

currently i use this css property

body {
background-image: images/bg.jpg;
background-repeat: repeat-x;
}
but because of this my content area remains the same all through the website..

[mufaddal]

i meant left and right..
you can see the demo page at http://sdaworks.com/web/lensmart/

this is the home page.. i have just taken one image in the background.. which has a blue panel running at top and a blue gradient effect panel running in the footers section..

but because of this in other pages also my content area height becomes limited to what it is in homepage.

PLease help me

[mufaddal]

but how shall i give three different backgrounds to 3 different sections..

please check this link..https://css-tricks.com/examples/FullBrowserWidthBars/

i hope u understand the problem now.. i want the code for that..

[hellomrtaylor]

Ah, right I think I understand your problem.

You have a fixed width site, but want to have background elements that run the full width?

Basically you’ll need to add more instances off your div.container and give them each a background image.
So instead of have 1 div.container that wraps around the whole page, you have 3: 1 hor the header, 1 for the content and 1 for the footer.

Hope this answers your question.

[mufaddal]

thanks alot for that effort.. yes that was my question.. but still when i try ur method i dont get the results..

will u please give me css code for the 3 div containers.
for example

topbar {
background-image: image1.jpg;
background-repeat:repeat-x;
}
midbar {
background-image: image2.jpg;
background-repeat:repeat-x;
}
footer {
background-image: image3.jpg;
background-repeat:repeat-x;
}
but with this code i dont get my image run full width…
please help

[Author]

Posts