How to create a full screen background

CSS, HTML5, Web Design

In this post, we’ll talk about how to create a full-screen background using CSS and HTML.  We are going to bypass all the CSS properties that exist for backgrounds to do this, so consider this a type of CSS hack (:  What we are going to do is insert an image to the page and then style it to act as a background.  So that is the first part, find the image you want to use and put it on the page like so:

<img src=”yourimage.jpg” class=”bg” alt=”Background Image”>

You can use a .jpg, .png, .gif, or whatever image you want.  I would just make sure the resolution or size is at least 1920×1080 so it won’t pixelate if viewed on larger screens.  Then we add a class of bg to it so we can manipulate it with the CSS later.  Lastly, the alt attribute helps search engines and screen readers know what the image is.  Next, we will apply the CSS to the image and it will look like this:

.bg{
width:100%;
height:100%;
position:fixed;
top:0px;
left:0px;
z-index:-1000;
}

Let’s break this down line by line.  .bg is the class that we applied to the image in the HTML.  This is how we tell the CSS what to style.

Width and Height of 100% make the image take up the whole browser window.

The fixed position means it won’t scroll up and down with the page content.  It will stay in place, just like a background would.

The top and left values of 0px tell the image where to be positioned on the page.  In this case, it will be in the upper left-hand corner, 0px from the top, and 0px from the left.

The z-index property defines what items will be on top or behind the image.  If there’s something with a z-index of 0 and something else with z-index of 1, the item with the higher z-index will be on top of the item with the lower value.  So when we give the image a -1000 z-index value that is basically guaranteeing us that nothing will go on top of it.  The whole point here is to give it a very low z-index value.

There you have it, once this code is applied to the image, it will act as a full-screen background image.  If you’d like to learn more check out our HTML/CSS/JavaScript training.  Have an amazing day!