Full Screen Backgrounds

title

Over the past few years, CSS3 has added new features and values that function with the diverse screen sizes and resolutions that dynamic sites are viewed on. From an iPad’s 960×640 resolution to a massive HD 2560 X 1440 screen resolution, and everything in between, the wide range of resolution demands a new CSS feature devoted to background size. With such an array of content area sizes viewed, full browser size background pages have become increasingly popular, and with a value named, cover, designers can now scale their background image to expand and contract in perfect proportion with whatever size the browser is at; essentially covering the canvas.

Here is an example of a site design that utilizes the background cover value
very successfully:

I Shot Him – Creative Design Studio
You will notice that the image they used scales with the browser window in proportion. Feel free to play around with the size of your browser window to see how small or large it can really scale (same applies to the links posted further in this demo).

The CSS3 background size property offers a set of values that can be used to customize size, ratio aspect, and proportions for your background image without having to repetitiously switch over to Photoshop to adjust the sizing of your background image for your page design preference.

This demo will be focused mainly on the cover value: other values included in background-size are, length, percentage, and contain. Length and percentage are both used to set the height and width of your background image. Length is simply set using pixel sizing (example: background-size:480px 260px; ) and percentage is set using a % (example: background-size:100% 100%;). The contain value will scale the image much like the cover value, however, it will only proportionally scale the image to an aspect ratio of the browser window size, meaning that it will scale the image to the largest size so that it’s width AND height can fit inside the content area, simply containing it inside.

So, let’s get started with background cover.

Before this CSS3 feature, the background image size was determined by the actual size of the image. Any dimension that the browser window is at beyond the image size will stretch around the image, and when the browser size goes below the dimensions of the image, areas of that image will be hidden.

Here is an example of a page with a background image sized at 1024×768 pixels — its intent was to have the entire image viewable within the content area with larger browser and screen sizes in mind:

Daryl Meier Steelworks
Notice how the large size of the image fills the content area pretty well, but as
you expand and contract the window, the image becomes cropped. When you expand past the image dimensions, there is no more background image to cover
the content area.

It is also recommended to be aware of the fact that at some point, the content area will step over the edge of the image’s height/width, where the designer will have to decide whether to set a repeat or not so that you either have an undesirable abyss of background color or a very noticeable line of the image repeating itself on the x or y line. But, by adding a simple property to your background image, cover, that inevitable ugly wallpaper repeat appearance is no longer a worry to the designer. This time, let’s use the same image from the previous example, and let CSS3 cover the entire content area, no matter what size it is at. This demo is specifically focused on applying background size/cover to the background image in body section. However, CSS3 background size values can be used and applied within any div as well.

Let’s take the basic property/value and apply it to the background-image url in the body section.

This is as easy as it gets, folks!

body
{
background-image:url('damascus.jpg');
background-size:cover;
}

Here is an example of the previous site with the css code above applied to the same background image:

Daryl Meier Steelworks (w/ background cover)
Notice how the image scales and constrains it’s proportions with the content area as you expand and contract the browser window.

This is background cover at it’s most basic. In CSS3, any background image will automatically repeat infinitely if “no-repeat” is specified.

Let’s add a “no-repeat” value to the css we just looked at:

body
{
background-image:url('damascus.jpg');
background-size:cover;
background-repeat:no-repeat;
}

Daryl Meier Steelworks (w/ background cover & no repeat)
Notice that it does the exact same type of scaling as the previous one with the repeat automatically set. But if you stretch the browser window to a longer height than the actual image’s height, you will notice a point where background cover can no longer keep the image in proportion under extreme dimension differences. It does the best it can, but when the dimensions of image to browser size are practically reversed, it can no longer keep the image size in proportion. Applying repeat or no repeat to background cover still gives you the undesirable outcome of scaling your browser window size outside of the dimensions of the background image.

Now let’s add a few basic values to fix these issues to make it look desirable in the content area no matter how you stretch your browser size.

There are a number of ways, like with any item in a page, to position this thing. The way a background image intended for the overall design of the page is displayed can vary. Suppose the designer wants to keep the center area of the background image always present and centered for the most part in the main content area. Well, that is what I am choosing to do with this demo. So, let’s get right to it:

I do not want the image to repeat. Ever. Even if the width of the browser is at 100 pixels and the height is at, say, 1,200 pixels — the image will never repeat if no-repeat is specified. With that said, we are going to have to position this sucker if we don’t want to see a blank canvas at that point. Let’s attach the background image so that it stays (sticks) within the content area no matter what the browser size is at by making it fixed. Now, if I want the image to proportionally scale, AND stick to the content area, AND stay centered in the content area… all it needs is a center positioning value added as well. In this case, I am going to center both the X and the Y value, so that the centering mimics the proportional constrained scaling of background cover.

So, all we are adding to the background cover is a no-repeat value, a fixed attachment to the browser window, and a few positioning values. THAT is as complex as it gets!

body
{
background: url(images/damascus.jpg);
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center center;
}

Daryl Meier Steelworks (background cover, with all the fix’ns)
Ta-DA! By adding just a few background property values to position the background image, smooth and proportionate background cover scaling is achieved even at small window iPad and iPhone sizes.

Background cover is a useful feature, not only because it intelligently scales your image in proportion to the content area, but it also is useful in that it does not crop away at parts of the image that is intended to be displayed as a design element in the page. Here are a few visuals to demonstrate the differences between areas of the image with cover applied to it in comparison to the old display of a static background image.

nocover at 715No Cover:
Top portion of the content area scaled at 715 px wide.

cover at 715Background Cover:
Top portion of the content area scaled at 715 px wide.
Nothing is cropped.

no cover at 430No Cover:
Top portion of the content area scaled at about 433 px wide.
Cropping is much more dramatic here.

cover at 430Background Cover: Top portion of the content area scaled at 715 px wide.
Still! Nothing is cropped!

Here are additional helpful resources for more information on
CSS3 background properties:

A List Apart – Supersize that Background, Please!
W3 Schools – CSS3 Backgrounds
Can I Use – Background Image Options

Hopefully you now have a very clear understanding on the CSS3 background cover value works, how it can benefit design elements on your site, and how you can apply this value to your background images.

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>