How to Create a Scalable Background Image For Your Website

As the web progresses, we all desire beautiful websites. There are many different ways to spice up any website, but a common one is to implement a full size background image that scales with the page. Knowing how to do this is essential, because doing this incorrectly can yield unwanted results, such as scrollbars, and clipping of your background image. Luckily, you can set up your background image to avoid these issues.

Be sure to use an image that is large enough to fill an average browser window without being stretched too much. It would be best to avoid stretching the image at all. Just be sure to save your background image as an optimized jpeg. That way, you can have a fairly large image, but it won’t take forever to load. You can download the sample image from here.

Screen shot 2012-09-06 at 1.29.53 PM

Some will tell you to use a jQuery, some won’t, but the following method uses CSS-only in order to resize the image and keep its aspect ratio intact.

Here is our sample html:

<body>
<div id="stage">
<img src="background2.JPG"alt="sitebackground" /> </div>
</body>
</html>

It is important to wrap the image in a div, so that we can center it. You can choose to take the actual image and set it to left and top positioning, but it won’t be centered at the top. This can be a pain if you want an image to center, such as when you are using it for a blog or a photography website. Here is what the image looks like in our browser so far:

Screen-shot-2012-09-06-at-1.37.43-PM

The CSS is a little more straightforward, which you will see below:

#stage {
position:fixed;
top:-50%;
left:-50%;
width:200%;
height:200%;
}
#stage img {
position:absolute;
margin:auto;
min-width:50%;
min-height:50%;
top:0;
left:0;
right:0;
bottom:0;
}
@media screen and (max-width: 512px) {
#stage img {
width:100%;
height:auto;
}

For the stage div, we need to set its position to fixed so that it stays put no matter what we do. We are setting the width and the height to 200%. The reason is that if we don’t, when the browser goes past the size barrier of the image, then you will see white space. It won’t scale the image with the size of the browser. We set the top and left values of the container div to -50%, to compensate for the fact that the height and width are doubled. This means that no matter what the size of the container div is, it is double the width and height of the browser, and is shifted half of the height and width to the left and top.

The second set of CSS styles the image within the stage container. We set the position to absolute, to make the image centered. If we don’t set the position to absolute, then the image shifts all the way to the left of the container div, which is  -50% off of the screen (See Below). You will end up losing half of the viewing area of your image. We set the margin to auto, so that it will center within the container div. We set the top, left, right and bottom values to 0, to that the edges are 0px away from all sides. This ensures that all sides of the image touch the corresponding edges.

Screen-shot-2012-09-06-at-1.52.31-PM

The third bit of CSS is to handle when the screen is smaller than the actualize of the image. If you don’t specify how the image should behave under these circumstances, then the image will squish down and become distorted, as shown below.

Screen shot 2012-09-06 at 2.09.35 PM

The CSS states that if the screen is 512px and below, to set the width of the image to 100% and to determine the height automatically. This keeps the image from collapsing vertically at a smaller screen size. Below, you can see how the image will react in a browser at 1400px wide, 1024px wide, and 450px wide.

1400px:

1400px

1024px:

1024px

450px

450px

Method 2: CSS3 Cover

CSS3 is fantastic, because there is an extremely easy solution for resizing backgrounds for your website. This involves no container div, no absolute positions, no workaround tricks, etc. The only downside is that Background-size: cover doesn’t work in IE below 9. If you can live with that, it works well with every other modern browser. Be sure to implement the different prefixes so that it works in Firefox, Safari, and Opera consistently. Strip the image and container div from your html, because we only need to style the body tag to implement this.

body {
background: url('images/body-bg.jpg') no-repeat center center fixed;
     -moz-background-size: cover;
     -webkit-background-size: cover;
     -o-background-size: cover;
     background-size: cover;
}

The result is that now the image scales well with the size of the browser, making your full size background match your site proportionally. Below are screenshots of the CSS above in use:

1500px

1500px

450px

Screen shot 2012-09-06 at 2.46.42 PM

Conclusion

With a little CSS and media queries, you can implement scalable, full-size images in the backgrounds of your website quickly and easily. The image will scale proportionally with the size of the browser, meaning that the viewer will never see white space or a tremendously distorted image. Now, you can implement gorgeous images that scale write along with your responsive website, ensuring that your site looks beautiful, no matter what platform your visitor is using to view your site.

 

If you liked this article, please help spread the news on the following sites:

  • Bump It
  • Blend It
  • Bookmark on Delicious
  • Stumble It
  • Float This
  • Reddit This
  • Share on FriendFeed
  • Clip to Evernote