Responsive Full Page Background Image Tutorial CSS3

In this week's tutorial, I'll be showing you how to code a responsive full page background image in CSS3. This responsive background image will fit the entire width and height of your web browser, without any scrollbars showing.

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:

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 are 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


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.

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!

Marisa Blair is a front-end web developer and graphic designer based in Toronto. When she's not writing for her blog, she's making design & tech videos for her YouTube channel.

Leave a Reply

Your email address will not be published. Required fields are marked *