<?php

$str = '<div class="article"><img src="/images/image.png" alt="alt for image"></div>';
$css = '<style> .article { font-size:16px; font-weight:bold; width:566px; height:576px; } </style>
';

function replace($str, $css) {

	preg_match( '@>\s\.(.+)\s{\s(.*)\s}@', $css, $res);
		
		$style['class'] = $res[1];
		$attrs = explode("; ", $res[2]);

		foreach ($attrs as $attr) {
				if (strlen(trim($attr)) > 0) {
				$kv = explode(":", trim($attr));
				$style[trim($kv[0])] = trim($kv[1]);
			}
		}

$rep = '<div class="$1">
 <div style="background: transparent url($2) no-repeat; 
 background-position: center center; background-size: cover; width: '.$style['width'].';
 height: '.$style['height'].'">$3</div>
</div>
';

	return preg_replace( '@.+class="(.+)"><.*="(.+)"\\salt="(.+)".+@', $rep, $str );
}
	$str = replace($str, $css);
?>

<html>
<head>
<?php echo $css; ?>
</head>
<body>
<?php echo $str; ?>
</body>
</html>