WP - alternative eresponsive background images

responsive background images

// picture ids: array(1, 2, 3)
// $queries = array(
	// 	array('large_screens','min-width: 1450px'),
	// 	array('medium','max-width: 480px'),
	// 	array('large','')
	// );
function responsive_background_pictures($id_array, $queries){
	$with_euery = '';
	$without_euery = '';
	// for each style resolution
	foreach($queries as $query){
		$each_style = '';
		
		// for each picture
		foreach ($id_array as $id) {
			$att = wp_get_attachment_image_src($id , $query[0]);
			$each_style .= '#img_'.$id.'{background-image:url('.$att[0].');}';
			
		}
		// if the query has no media query resolution set, print it out as it is
		if(!empty($query[1])){
			$with_euery .= '@media only screen and ('.$query[1].') {';
			$with_euery .= $each_style;
			$with_euery .= "}\n";
		}else{
			$without_euery .= $each_style;
		}	
	}

	return $without_euery."\n".$with_euery."\n";
}