Header with background

The header uses the featured image of this page as an background. It can be made responsive by using the rwp_style() function. This will generate a <style> tag with the necessary CSS.

<?php
echo rwp_style( get_post_thumbnail_id(), array(
  'selector' => '#hero'
) );
?>
<header id="hero">
  <h3>Header with background</h3>
</header>

Result:

<style>
#hero {
  background-image: url("http://responsifywp.com/demo/wp-content/uploads/2015/02/IMG_5683-150x150.jpg");
}
@media screen and (min-width: 150px) {
  #hero {
    background-image: url("http://responsifywp.com/demo/wp-content/uploads/2015/02/IMG_5683-300x200.jpg");
  }
}
@media screen and (min-width: 300px) {
  #hero {
    background-image: url("http://responsifywp.com/demo/wp-content/uploads/2015/02/IMG_5683-480x320.jpg");
  }
}
@media screen and (min-width: 480px) {
  #hero {
    background-image: url("http://responsifywp.com/demo/wp-content/uploads/2015/02/IMG_5683-880x587.jpg");
  }
}
@media screen and (min-width: 880px) {
  #hero {
    background-image: url("http://responsifywp.com/demo/wp-content/uploads/2015/02/IMG_5683-1024x683.jpg");
  }
}
@media screen and (min-width: 1024px) {
  #hero {
    background-image: url("http://responsifywp.com/demo/wp-content/uploads/2015/02/IMG_5683.jpg");
  }
}
</style>
<header id="hero">
  <h3>Header with background</h3>
</header>

Page weight

Window width Page weight
320 px ~139 kb
568 px ~178 kb
1024 px ~476 kb

According to Google Chrome Developer tools.

Loading times, 3G connection (750 kbps)

Window width Load time w/ RWP
320 px ~2.06 s
568 px ~2.52 s
1024 px ~5.71 s

Based on simulation in Google Chrome Developer tools.