Useful Stuff About:
Background Image Cover
Resize this browser window to see effect of background image that resizes itself to COVER the window background
- Best practice is to create a large enough image (something like 2000x1500) so the the image is usually shrunk which maintains sharp edges to image.
- Click here to see GOOD example. Note the sharp edges of the background image for any browser size.
- Bad practice is to create a small image which will be expanded to cover a large window and will result in pixelation.
- Click here to see BAD example. Note the pixelation of the background image for any browser size.
Here's the CSS
html {
background-image:url(../images/Background_Image_Cover.jpg);/*Adjust the path to actual image*/
background-size:cover;/*This is the important CSS to make the image cover the browser window even if window is resized*/
}