WordPress 4.7 custom background image bug & workaround

If you encountered this bug but are not using Autoptimize, leave a comment below or contact me here. Your info can help understand if the regression has an impact outside of Autoptimize as well!

Gotta love Sarah, but there’s a small bug in Vaughan’s (WordPress 4.7) that breaks (part of the CSS) when Autoptimized. If you have a theme that supports custom backgrounds (e.g. TwentySixteen) and you set that custom background in the Customizer, the URL ends up escaped (well, they wp_json_encode() it actually) like this;

body{background-image: url("http:\/\/localhost\/wordpress\/wp-content\/uploads\/layerslider\/Full-width-demo-slider\/left.png");}

Which results in the Autoptimized CSS for the background-image being broken because the URL is not recognized as such. The bug has been confirmed already and the fix should land in WordPress 4.7.1.

If you’re impacted and can’t wait for 4.7.1 to be released, there are 2 workarounds:
1. simple: disable the “Aggregate inline CSS”-option
2. geeky: use this code snippet to fix the URL before AO has a change to misinterpret it;

function fix_encoded_urls($htmlIn) {
	if ( strpos($htmlIn,"body.custom-background") !== false ) {
	  	if ($badUrls) {
			foreach ($badUrls[1] as $badUrl) {
				$htmlIn = str_replace($badUrl, stripslashes($badUrl), $htmlIn);
  	return $htmlIn;

5 thoughts on “WordPress 4.7 custom background image bug & workaround

  1. Mike Irish

    Hi Frank,

    Wow!! I have been fighting this problem for weeks/months…all alone. I thought for sure it was something I did, we had a big melt-down on our Genesis theme…and thought the missing header.png came from that.

    What I did just today before reading this was ti create a 1 x 1 trans. png and uploaded the image so the file will now be ‘found’.

    Along with this I was going to delete the AO cache and start-over…what do you think?

    Thanks, Mike

  2. Mike

    I looked at “also aggregate inline CSS” it was already unchecked. My trans 1 x1 png worked…no degrading of the site. Then 4.7.1 came out…all seems well!

    Thanks, Mike


Leave a Reply

Your email address will not be published. Required fields are marked *