Home » Tutorials » HTML5/CSS3 » Creating a Full Width Background Image

Creating a Full Width Background Image

full width background

In this tutorial I will show you a few simple ways to create a full page responsive background image. The main idea is the image to be centered on page, not to cause scrollbars, without white space and of course to adapt with the browser resolution.

Demo

Full Page Background Image with CSS3

The whole secret is to use the CSS3 property background-size. The cover value is used when we want to scale the background image to be as large as possible so that the background area is completely covered by the background image.


html { 
  background: url(images/background.jpg) no-repeat center center fixed; 
   background-size: cover;  
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
}
Some parts of the background image may not be visible depending on the resolution, so keep the main idea more centered, not in the corners.

Advertisement

The background-size property is supported in IE9+, Firefox 4+, Opera, Chrome, and Safari 5+.

Alternative option by using only CSS

In case you want better browser support or don’t like CSS3, you can try to do it the old way.

In your HMTL:
 <img id="background" alt="" src="images/bgr.jpg" />
And the CSS


#background {
  position: fixed; 
  top: 0; 
  left: 0; 
  min-width: 100%;
  min-height: 100%;
}

This technique is not recommended because it crushes the image in smaller resolution.

In this tutorial I will show you a few simple ways to create a full page responsive background image. The main idea is the image to be centered on page, not to cause scrollbars, without white space and of course to adapt with the browser resolution. [button color="orange" size="medium" link="http://demo.ftutorials.com/full-width-background/"&hellip;

Review Overview

0%

User Rating: 4.59 ( 4 votes)
0

About Georgi Dyulgerov

Georgi Dyulgerov

Founder of fTutorials.com - the website aiming to keep you in touch with the latest technologies in the brand. Also a Freelance web developer.

Check Also

Change placeholder color

Style HTML5 Placeholder with CSS

In the previous tutorial, I showed you how to create a responsive HTML5 Mail Form. ...

2 comments

  1. Wow that was odd. I just wrote an extremely long comment but after I clicked submit my comment didn’t
    appear. Grrrr… well I’m not writing all that over again.

    Anyway, just wanted to say wonderful blog!

Leave a Reply

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


Loading Facebook Comments ...