Display full screen background image using CSS

In this tutorial I am going to share some useful CSS code to Display full screen background image using CSS, You can choose any full size HD image and place your website background and make it fixed, During zoom in and zoom out time background image will be fixed only content will be zoom in and zoom out. It’ll fill your entire browser space with no white space, There is property in CSS called background-size which help you to achieve this goal by purely using CSS.



Here is the CSS code snippet to display full page background.

html { 
  background: url(background.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

See live demo

DEMO



Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.