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; as of 2015, I would recommend an image resolution of 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 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). 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.

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.

Image of San Marco Square by Domenica Prinzivalli, licensed under Creative Commons

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.