Posts Tagged ‘height’

How To Make A Small Image A Full Screen Background

September 5, 2009

Is it possible to create a full screen background out of a 10×400 gradient image (or any other image)? Yes, it is quite simple using the css code below. After adding the following code to your css, just insert the image into your html and set its id equal to background to have a full screen background image.

body, html{
padding:0;
margin:0;
}
#background{
position:absolute;
top:0px;
left:0px;
width: 100%;
height:100%;
z-index:-1;
}

I searched Google countless times for a solution, and I could not find an answer. Finally, I gave up and settled for a different solution which I will discuss in a later post. However, while I was trying to solve another problem, I realized what was missing from one of my previous attempts. I only needed to adjust the padding and margin to 0 for the html and body elements.