CSS3 Responsive Website Background Tutorial

For a better understanding of the results you can achieve by styling your website background I will demonstrate the options you have using CSS3.

 

The background-image property displays one or more background images for an element. In this tutorial we will cover using one background image to style the background of the HTML body.

We will use the image above as background-image and regent st blue (#9abee1) as background-color.



The correct CSS syntax for the HTML body background image & color is:

body{
       background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijRO0KKRuzG_5fiiucDOYAIk7X4H20Lz8q9iMSn5ZZ9Yj6iATQd5_7Zwezg8eVQ_qgDpfJW6qGuBO45ZHPOn6Whar0x1lCJvRHDr-GOdNjTizk_oVvRiwXCxjh2cUT3qKHjljPTQyxGjM/s1600/bg.jpg');
       background-color:#9abee1;
      }

However, using only this code the image will be tiled (in most browsers), and not stretched to cover the entire browser window.

We will now make sure the background image does not scroll with the page by using the background-attachment property.

Also, we will center the image vertically and horizontally by using the background-position property, and stretch the background image to cover the entire background by using the background-size property.

You code should now look like this:

body{
    background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijRO0KKRuzG_5fiiucDOYAIk7X4H20Lz8q9iMSn5ZZ9Yj6iATQd5_7Zwezg8eVQ_qgDpfJW6qGuBO45ZHPOn6Whar0x1lCJvRHDr-GOdNjTizk_oVvRiwXCxjh2cUT3qKHjljPTQyxGjM/s1600/bg.jpg');
    background-color:#9abee1;
    background-attachment:fixed;
    background-position:center center;
    background-size:cover;
}

And the end result should look like this:

And here is the same page at a different resolution:

 

Please leave your comments and/or questions in the comments section below.