How To Make A Small Image A Full Screen Background – Part II

As promised in a previous post, I will now discuss a second solution to creating a full screen background out of a small image.  This solution probably works best with gradient images; however, it should work with other images that have a solid color at the bottom.  The code is below.

body{background: #FFFFFF url("bg2.JPG") repeat-x;}

While, the image you are using as the background doesn’t fill the entire screen in this example, this code creates the illusion that the image is filling the entire screen. Essentially, you create a vertical gradient.  Then, you remember what the bottom color is. Next, you type the code above. Where I typed #FFFFFF, you enter the color (hexadecimal or name) at the bottom of your gradient.  In this fashion, a seemless transition is created between the bottom of the gradient and the body background color.  Thus, you have the appearance of a full screen background.