I just thought I would do a quick write-up on how to add a Full Screen Background Hero Image to your Website. The way described here will completely cover the browser window and at the same time be static so that it does not slide up when the page is scrolled. This is done purely in CSS. I would guess that a large majority of you are also running your site using WordPress. Using CSS you may also have a different full screen background hero image for separate posts or pages! Most people use full screen hero images only on the front page of their WordPress website though and that can also be done by targeting your homepage (or any page) in the CSS. Being able to specify which page has a full screen background image that covers the whole browser window is popular these days. The code works in the major modern browsers that we need it to.

Remember to optimize the background image so that it does not take too long to load.
A great site to do so can be found at – https://compressor.io

The basic CSS code is as follows:

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

To target your WordPress Homepage (or any page-id or postid) this code can be used. Find the page-id of your homepage and add it to the CSS code (My Homepage ID is “40” in the example below.)

.page-id-40 {
      background: url(“images/background.jpg”) no-repeat center center fixed;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
}

You can add multiple page or post Id’s to the same code as follows:

.page-id-40, .page-id-44, .page-id-71 {
      background: url(“images/background.jpg”) no-repeat center center fixed;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
}

So there you have it. Be a Hero!