CSS Full Screen Background Image Tutorial
You can easily add a full screen background image to your website or web application with the help of CSS styles. In this tutorial, I will demonstrate how to do that by providing some examples.
Using large images as full screen backgrounds on web pages has become quite popular as a web design trend over the last couple of years. Displaying a relevant, high quality image in the background not only makes your website look more attractive but it also helps you present your content in a stylish way. Considering that the network connection speeds and web hosting bandwidth quotas have increased quite a lot, it also does not create much burden on the page load, assuming the image is well optimized.
In today's world, where people access websites using a wide variety of devices with different screen sizes, the web designer's ultimate task of making a design fully functional and pleasantly displayable on as many screen sizes and web browsers as possible have become much more important but also equally cumbersome. Especially when it comes to images, backgrounds and full screen designs, it gets quite difficult to adapt a design to multiple screens.
Thanks to the concept of responsive design and a number of CSS tricks, we can create our designs to fit any size of screen nicely, including small mobile phone screens. Though a website may not look exactly the same on all screens and browsers, the fact that it will be viewable and browsable with no issues is what we are really looking for as web designers and developers.
Full-width and full-screen background images are frequently used in responsive web designs. There isn't one single correct way of adding a full screen background image to your web page as it depends on your page structure and what you are trying to achieve with the background image. Therefore, I picked one of the simplest methods to provide as a basic example.
How to Make a Background Image Full Screen with CSS
I will first create a basic HTML web file and name it as index.html to use in this tutorial. Actually, it is a good habit to keep a sample HTML5 template page that you can quickly copy and use while practicing or for use in your projects.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Full Screen Background Image Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
</style>
</head>
<body>
</body>
</html>
In this example, I will use internal CSS styles but you can also use external CSS styles if you will be using the same styles on multiple pages. Also note that we added the viewport meta tag to ensure the correct display of our page on varying screen sizes.
Secondly, I will use the following image (background.jpg) as the fullscreen background:
I will continue with a couple of different types of fullscreen background images.
CSS Full Screen Stretching Background Image
To create a background image that stretches and fits the browser window, I will add the following styles to the <html> and <body> elements on the index.html page:
html {width: 100%; height: 100% }
body {
background-image: url("background.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: 100% 100%;
}
The width and height properties for the html element ensures that the page covers the full size of the web browser window, regardless of what screen size the computer/device/tablet/phone may have. This is important for the background image to fill the page fully.
In this example, I used an image of 1280px x 800px but you can use any size of image as you wish. If you need to do resize or edit your image, you can use one of the free online photo editors.
For the body element, we use the background-image property as usual to specify the location of the image that we will use as the background. Then we position the image at the center of the screen using the background-position property. We use background-repeat (optional) to prevent the repeating of the image as the user scrolls down in case the page content is does not fit into one screen. Finally use the background-size to fit the full page and stretch as the screen size varies.
CSS Full Screen Responsive Background Image
In the second approach, we keep the center of the image at the center like it is done in the first approach, but this time, the image is not stretched and distorted to fully fit the browser window. When a size or layout change happens, or when you view on a different screen-size device, you will see part of the image covering the full screen, without the image stretched or zoomed.
Here's the code we use for that:
html {width: 100%; height: 100% }
body {
background-image: url("background.jpg");
background-position: center;
background-repeat: no-repeat;
}
CSS Full Screen Fixed Background Image
The above examples do not make use of a fixed background image which is what you might be needing for your design. To fix the position of the background image, we use the background-attachment property as follows.
html {width: 100%; height: 100% }
body {
background-attachment: fixed;
background-image: url("background.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: 100% 100%;
}
If you don't want the image to stretch on different screen sizes, you can simply omit the background-size property and finally, have the following code on your page:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Full Screen Background Image Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html {width: 100%; height: 100% }
body {
background-attachment: fixed;
background-image: url("background.jpg");
background-position: center;
background-repeat: no-repeat;
}
</style>
</head>
<body>
</body>
</html>
The above code will make the background image fill the full screen, stay fixed at the center and remain at its position even when a scroll happens.
Now that the background is ready, you can continue with populating your page with content and other elements. Just remember to optimize your background image and save it as small as possible for the best loading times.
TIP: Before you publish your website, make sure to preview your designs on mobile devices, your browser's mobile preview screens, or on mobile phone simulators to make sure they will display and function as intended.
You can also create a full screen background video with CSS, which I explained in another tutorial.
More CSS Tips
CSS Full Screen Video Background Tutorial How to Hide Scrollbars with CSS CSS Tutorial: Div with Background Image CSS Tutorial: Div with Background Video CSS Browser Compatibility: What You Should Avoid Double Underline and Double Overline Text with CSS Designing a Simple Testimonial Box with CSS
CSS Tips