Wednesday, September 22, 2010

Resizable Background Image

I have often had ideas for websites that would incorporate using an image in the background of the design that would bleed off each edge with no white space and no scrollbars. Since different computer monitors use different screen resolutions, there is no set image size for a background image that can be used. This tutorial will teach how to place a background image that can scale and resize with the varying sizes of the browser window.

Below is an example of the final product.




In order for this to function properly, you must place a number of wrappers around the html image source. Each of these wrappers will be necessary to complete this successfully.


Now you must insert the following CSS code.



Click the following link to see this in action.

http://www.fall10.graphicinterfacedesign.com/students/kpeterso/tutorial/resize/resize.html

No comments: