Using WordPress responsive images for css background-image property, in-line styling

example-output.html

<style>
.header {
	background-image: url(http://local.dev/wp-content/uploads/2016/04/image-300x151.png)
}
@media only screen and (min-width: 300px) {.header {
	background-image: url(http://local.dev/wp-content/uploads/2016/04/image-768x386.png)
}}
@media only screen and (min-width: 768px) {.header {
	background-image: url(http://local.dev/wp-content/uploads/2016/04/image-1024x515.png)
}}
@media only screen and (min-width: 1024px) {.header {
	background-image: url(http://local.dev/wp-content/uploads/2016/04/image.png)
}}
</style>

mobile-first.php

<?php
/**
 * Generate some inline styles for use with the background-image and responsive images in WordPress.
 * 
 * Uses wp_get_attachment_image_srcset to gather the image urls and device sizes. 
 * A mobile-friendly application of the background-image property.
 * In this example, it's setup for a full-width image
 * 
 * @author Joshua David Nelson, josh@joshuadnelson.com
 */

$image_id = get_post_thumbnail_id(); // set or grab your image id
$img_srcset = wp_get_attachment_image_srcset( $image_id, 'full' );
$sizes = explode( ", ", $img_srcset );
$css = '';
$prev_size = '';
foreach( $sizes as $size ) {
	
	// Split up the size string, into an array with [0]=>img_url, [1]=>size
	$split = explode( " ", $size );
	if( !isset( $split[0], $split[1] ) )
		continue;
	
	$background_css = '.header {
		background-image: url(' . esc_url( $split[0] ) . ')
	}';
	
	// Grab the previous image size as the min-width and/or add the background css to the main css string
	if( !empty( $prev_size ) ) {
		$css .= '@media only screen and (min-width: ' . $prev_size . ') {';
		$css .= $background_css;
		$css .= "}\n";
	} else {
		$css .= $background_css;
	}
	
	// Set the current image size as the "previous image" size, for use with media queries
	$prev_size = str_replace( "w", "px", $split[1] );
}

// The final css, wrapped in a <style> tag
$css = !empty( $css ) ? '<style>' . $css . '</style>' : '';

@ggeiger Thanks for your rewritten code– it does the job nicely. The addition of the custom usort() function solves the problem I was having with the original where the wp_get_attachment_image_srcset() function called the sizes out of order.