Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
It’s only for image tags.
Oh, that’s unfortunate. Are there any workarounds? Sometimes, it’s much easier to style an image if it’s a background. You have nice options like background-size: cover and contain.
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
The “Responsive images” term isn’t really about responsive images, it’s about bandwidth. I don’t think that has anything to do with what you want to achieve.
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
You’re comparing apples and oranges; HTML5 introduced responsive images on the ‘<img>’ element; whereas you want to use CSS to swap out images. You can surely do this yourself using CSS, The W3C do not have to develop special functionality for this.
Simple example:
.foo {
background: url('small-foo.png');
}
@media screen and (min-width: 400px) {
.foo {
background: url('medium-foo.png');
}
}
@media screen and (min-width: 800px) {
.foo {
background: url('large-foo.png');
}
}
But WordPress, as a Content Management System, shouldn’t have to incorporate CSS responsive background images – This is the choice of the plugin or theme developer.
Thanks for that suggestion. Sorry to bother, but I’m having an issue with that method.
Here’s the div I’m using to hold my background image:
<div class='img-wrap' style='background: url(<?php echo the_post_thumbnail_url( 'medium' ); ?>) 50% 0% no-repeat; background-size: cover'></div>
I would expect this to grab the 300×300 image, but it goes to the default full sized one instead. I checked the uploads folder, and there has indeed been a 300×300 version generated. Any clue why it’s not working?
