Phase 6: Using media queries to load the right background image, without loading all options

It’s probably best to go read this article first. 
http://timkadlec.com/2012/04/media-query-asset-downloading-results/

This describes a series of tests to find out the best way of handling multiple images within a web page with media queries. The goal is to have only the image relevant for the current dimensions to download. Remember with most CSS that you write, you’ll arrange it so only one image shows — that’s not hard. But making sure only one image downloads is tricky!

In addition to the following styles in this media query, add these:
@media only screen and (max-width: 701px)  {
header {
	background: url(../img/boston-710.jpg) no-repeat;
	width: 100%;
	height: 149px;
}
header h1 {
	padding: 100px 0 0 10px;
	margin: 0;
	font-size: 1.6em;
}
header h1 a {
	color: #fff;
	text-decoration: none;
}
}

For the larger version of the header, this is currently specified in the portion of the stylesheet without media queries (around lines 29-43). We need to remove these styles from this part of the stylesheet and put them in an appropriate media query. Otherwise, the boston-1200.jpg image may always load, even if it’s then overridden by the media query for a smaller image.

Add this media query:
@media only screen and (min-width: 702px)  {
header {
	background: url(../img/boston-1200.jpg) no-repeat;
	width: 100%;
	height: 218px;
	font-family: 'Cabin Condensed', sans-serif; 
	color: #fff;
}
header h1 {
	padding: 0.5em;
	margin: 0;
}
header h1 a {
	color: #fff;
	text-decoration: none;
}