Responsive Full Page Background Image Tutorial CSS3

Featured CSS3 Properties

Thanks to CSS3, we can now use the background-size property. By using the background-size property on an element, we can set it’s value to cover which will then scale the background image to expand as big as its container. The beauty of the cover value is that it’s also responsive, making it ideal to use in modern web design. The CSS3 code for the responsive full page background image is really simple. Take a look at the code below:

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

Browser Support

As you can see in the code above, the first declaration states what image that will be used. The second, third, and fourth declaration is there for browser support so that this CSS3 property will work in Google Chrome, Firefox, Internet Explorer, and Opera. The image below shows which browsers support the background-size property.

browser support


<script type="prism-html-markup">
<div class="text-container">
	<h1>go big or<br>
	go home.</h1>

The CSS3

If you’re not sure how I added Google Fonts to this web page, read my tutorial: How To Use Google Fonts On Your Website.

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

.text-container {
 max-width: 960px;
 position: absolute;
 top: 200;
 left: 70;

h1 {
 font-family: 'Roboto', sans-serif;
 color: #fff;
 font-size: 156px;
 text-shadow: 10px 10px 4px rgba(0, 0, 0, 0.1);
 text-transform: uppercase;

Show & Tell!

Feel free to share a screenshot of what you’ve made using this tutorial in the comments section below! Have any questions or comments? Let’s chat in the comment below!

Like this article?

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.