100% Full Size Background Image

In modern web design, there are many websites that use a full width and full height background image that scales to the size of the browser window. It seems complicated, but with CSS3, it is actually a very simple thing to implement.

For a Demo, please visit jhauge.com to see this in action!

We set up our CSS body selector with the following mark-up:

body{
    margin: 0px;
    padding: 0px;
    background: url(imgpath.img) no-repeat center fixed;
    background-size:cover;
    overflow-x: hidden;
}

Let’s break this down.

We set our margin and padding to “0px” in order to remove any whitespace/ border that may be automatically inserted by the browser. We then specify the image we want to include, set our background style to no-repeat (the selected image will only appear one time), and center the image in the browser window. The “fixed” positioning that we add to our background property will keep it stationary while the content of the page scrolls.

We use overflow-x:hidden; to remove the bottom horizontal scrollbar from the page. This may not be what you want if you are looking to have a website that scrolls horizontally, but if you are looking to have a vertically scrolling page, it looks nicer and overall displays a cleaner UI if there is no horizontal scrollbar.

Background-size: cover; is a CSS3 property that is supported in IE9+, Firefox 4+, Opera, Chrome, and Safari 5+. It tells the browser window to take the specified image and fill the browser window. With some browsers, there should be a specified browser specific property. i will list these below:

-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover;

These may not be not absolutely necessary in your mark-up but if you come across some cross-browser issues, these extra browser specific properties should solve your problems.

*TIP – make sure that your image that you select to be a full size background is optimized for the web at a large size. I typically will not give a background image a width less than 1920 pixels wide. That way it looks clear on even a large monitor with a high resolution display.

Good luck implementing a full size background image on your website!, I hope this was a help for you, thanks for stopping by!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s