I found a solution:
*** Go to
…/external-featured-image/includes/nelio-efi-main.php
*** On line 167 replace:
else {
$html = sprintf(
'<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" ' .
'style="background:url(\'%s\') no-repeat center center;' .
'-webkit-background-size:cover;' .
'-moz-background-size:cover;' .
'-o-background-size:cover;' .
'background-size:cover;' .
'%s%s" class="%s wp-post-image nelioefi" '.
'alt="%s" />',
$image_url, $width, $height, $additional_classes, $alt );
}
return $html;
}
*** by:
else {
$html = sprintf(
'<div class="my-class"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" ' .
'style="background:url(\'%s\') no-repeat center center;' .
'-webkit-background-size:cover;' .
'-moz-background-size:cover;' .
'-o-background-size:cover;' .
'background-size:cover;' .
'%s%s" class="%s wp-post-image nelioefi" '.
'alt="%s" /> </div>',
$image_url, $width, $height, $additional_classes, $alt );
}
return $html;
}
*** Then in CSS stylesheet give a style to .my-div class, for example:
.my-div{background:#003f5f url(“http://my-domain.com/wp-content/themes/Extra_Noticias_Wide/images/header-background.jpg”) no-repeat scroll 0 0; background-size:cover;}
Hi!
I’m glad to know you could find the solution. Just one quick notice: in the HTML, you added a <div> tag whose class is my-class:
<div class="my-class"><img src....
but in your CSS, you’re referring to a different class (my-div):
.my-div {
background: ...
}
So, anyone trying to implement this solution, make sure that you use the same class in both the HTML code and the CSS rule.
Warm regards,
David
Unfortunately I can not change the comments after a while, so your observation is very welcome. Thank you David!
You’re welcome! Glad I could help 🙂
