please look at this link
http://www.sudhakargolakaram.co.in/f...oundimage.html

my question is about the image at the footer. i have a wrapper div with a width of 900px, at the top of the page will be the content inside the wrapper div and at the bottom of the page i want a background image which should appear 100% of the width and height which is the height of the image.

within this footer div which i need the background image i also want content to be inside the 900px wrapper div so i set the footer div to width: 100% and height 684px which is the height of the background image however this background image is not appearing at 100% width but stopping at 976px which is the width of the image

how do i make the background image appear 100% of the width and have the footer content sitting within this background image

please advice

The footer IS 100% of the viewport width. Your image is only 976px wide, set to no-repeat. Unless you make your footer image a LOT wider, or allow it to repeat horizontally, there's no way it's going to stretch to fill the horizontal space.

It's doing exactly what you told it to do - do not repeat.

You can try to put image in you footer instead in background. Then define css

#footer img {
position: absolute;
top:0;
left:0;
width: 100%;
z-index: -1;
}

I am not sure is this work because I haven't time for try.

i have update the file
http://www.sudhakargolakaram.co.in/f...oundimage.html

i am now able to stretch the image to 100% width and have the footer content appear inside the wrapper

i have used an img tag inside footer div and to this inline image i have set width of 100% and negative z-index

Looking good on my 1024x768 monitor.