What's are some best practices for responsive images (e.g. for section headers)?

Silly me is letting a client upload their own header images. I'm checking if they've uploaded something, and if found I add it as a background image with an inline style in the template.

But, how do I swap images based on device used?

Normally, I'd just add media queries and swap out the images in my css, but when they're inline backgrounds, I'm not sure what to do.

How do you handle it?

Topic responsive images Wordpress

Category Web

1
answered at

If you set background image to some tag inline, you still able to control it with css and media queries, !important is still working =)

<div id="image" style="background:url(image.jpg);">

!important still has priority over inline style and you can use in your media queries.

#image{
    background:url(another-image.jpg) !important;
}

About

Geeks Mental is a community that publishes articles and tutorials about Web, Android, Data Science, new techniques and Linux security.