Andrew Nevins on "Responsive background image sizes?"

ساخت وبلاگ

jordanwebdev
Member
Posted 10 hours ago #

Hi everyone. I apologize if this is in the wrong spot- I really didn't know where to put it.

I know an earlier version of WordPress introduced responsive images in terms of sizes and srcset, so that the browser can make intelligent decisions on what image to load. I am wondering if this still works for background images. I am not able to see a natural image size in the console for background images.

So does this only work for <img> tags or for any ol' <div> with a background image, too?

It's only for image tags.

jordanwebdev
Member
Posted 9 hours ago #

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.

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.

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.

WordPress ...
ما را در سایت WordPress دنبال می کنید

برچسب : نویسنده : استخدام کار wpss بازدید : 261 تاريخ : يکشنبه 30 خرداد 1395 ساعت: 17:07