How do i make my background image resize for different resolutions?
I added the following to my css file:
margin: auto;
This works great, except now when I change to a lower screen size, the main table which contains all the content covers up my background image that I have on the left side of the page. Is there a way to add a code that also adjusts the background image?
February 23rd, 2011 at 6:34 am
No.
A background image has a fixed size. You can center it, tile it, set it top left, but you CANNOT resize the image when you resize the window.
You COULD get the screen width using AJAX, to inform your server of the screen width, and you could then rebuild your image to size on the server then download it, or resize it.
A total waste of time.
Do NOT use full screen images as background! It is a fad that has totally gone out of fashion.
If you really want an image, develop an image you can “stretch” and build it as a table without any padding (see and example at http://www.web2coders.com, the “Table v Div Challenge”: the “book” in the center area is a “stretchable” image).