Display An Image Full Page

Display an image full page

See the working demo below.

Demo: How to Display an image full page with just CSS


Edit as necessary.

            ody, html {
                height: 100%;
                margin: 0;

            .bg {
              /* The image used */
              background-image: url("https://developer.bennysutton.com/img/jimi.jpg");

              /* Full height */
              height: 100%; 

              /* Center and scale the image nicely */
              background-position: center;
              background-repeat: no-repeat;
              background-size: cover;


A few lines of CSS is all you need to display an image full page