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
via w3schools.com

The HTML



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?

I'm a Content Creator, Front-End Web Developer, UI Designer, based in Toronto, Canada. I have a healthy addiction to the internet, technology, and digital media. I'm so passionate about all things design and tech that I write about it any chance I get on my blog xopixel.com!

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.