demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

CSSslidy: an auto-generated #RWD image slider. 3.8K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

Background Image Resize example screenshot

Dynamically Resized Backgrounds With CSS3

css / backgrounds

Estimated reading time: 3 minutes, 15 seconds

Large, illustrative background images appear to be the trend in web design this year. Links in recent articles here have provided some examples: thesixtyone and youarelistening.to (from “Music to Code By”), along with sites like Flipboard.

If you decide to go down this particular design route, there are a few points to keep in mind:

  • Full-screen, high quality images tend to be associated with large file sizes. You will likely need to balance this with other demands on your page.

  • Do some research on average screen sizes before committing to a resolution for your background image. The best solution would be to study stats from an existing site by using analysis software such as Google Analytics; alternatively, you could look into (less accurate) overall trends. As of 2014, I would recommend an image resolution of 1024 × 768 or 1200 × 800 as a starting point.

  • Remember that mobile devices count too! You may want to use an @media query to load in a 320 × 480 background image for mobile devices as an alternative to the large image that you will load for screens.

  • Everything else being equal, a high resolution image dynamically scaled down will tend to look better than a low resolution image scaled up; if limited to using just one picture for all devices, err on the side of caution and use a higher-resolution image for your background.

  • As a general rule, do not write CSS to change the aspect ratio of the background image in response to the browser being resized; that is, do not attempt to fill the entire background with the image. This means that you will have to choose a background-color to fill the space where the image is not present.

  • Keep in mind standard rules in regards to background images: you want content on top of the image to be legible and easily seen.

With those conditions in mind, the CSS do make the background dynamic is very easy; it's a CSS3 draft property called background-size.

You have several choices when it comes to background-size for the body: setting the property to cover will dynamically scale the background image such that it always scales to whatever dimension is largest (height or width of the browser window). The one downside of this is that the cover property is not supported by older browsers (circa 2009 or earlier). Setting it to 100% (representing width) might be a better solution for older browsers.

Alternatively, you can use background-size: contain, which gives preference to the image, ensuring that all of the background image is shown no matter what the aspect ratio or size of the browser window is. You will likely need to test all three options to determine which one is most appropriate for your page, audience, and content.

Whatever solution you choose, you should also define background-color in the same selector as a fill color for areas not covered by the image; this will also act as a fallback in case the image fails to load.

For the example to follow, I have used an HDR image of San Marco Square by Luca Moglia, licensed under Creative Commons. Given the following HTML code:

<div id=stmark>
<h1>Piazza San Marco</h1>
<p>Piazza San Marco (often known in English as St Mark’s Square), is the principal public square of Venice. “The Piazza” forms the social, religious and political centre of Venice…
</div>

Apply the following CSS (you’ll have to add vendor prefixes to gain support in older browsers):

body, html { min-height: 100%; }
body {
color: white;
background: url(st-marks-square.jpg) center no-repeat;
background-size: cover; background-color: #444;
}
div#stmark { width: 40%; background: rgba(0,0,0,0.6);
border: 5px double white; margin: 3em;
padding: 2em 2em 0 2em; float: right;
line-height: 155%;
font-family: Cochin, "Times New Roman", Times, serif;
}
div#stmark h1 { margin-top: 0; }

The result will be a background image behind the content that will rescale to the size of the browser window.

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.