Viewer

Headers DemoDownload plugin

style.css

/**
 *
 * A child theme would be more appropriate for this CSS.
 * Not all the widths are needed, but these are the widths TwentyThirteen uses.
 *
 */
 
/* define header images depending on screen width */
.site-header {
		background-image: url(images/header3200.png);
		background-size: 1600px auto;
		background-position: center top;
		}
 
@media (max-width: 1599px) {
	.site-header {
		background-image: url(images/header3200.png);
		background-size: 1600px auto;
		}
@media (max-width: 1069px) {
	.site-header {
		background-image: url(images/header2140.png);
		background-size: 1070px auto;
		}
	}
@media (max-width: 999px) {
	.site-header {
		background-image: url(images/header2000.png);
		background-size: 1000px auto;
		}
	}
@media (max-width: 767px) {
	.site-header {
		background-image: url(images/header1536.png);
		background-size: 768px auto;
		}
	}
@media (max-width: 643px) {
	.site-header {
		background-image: url(images/header1288.png);
		background-size: 644px auto;
		}
	}
@media (max-width: 359px) {
	.site-header {
		background-image: url(images/header720.png);
		background-size: 360px auto;
		}
	}

/* set colour of header text */
.site-title, .site-description {color: navy;}

/* uncomment to remove header text */
/* .site-title, .site-description {display: none;} */