I am thrilled to be able to use an image block as a background image instead of using a background image in a div - I agree that this is probably better for performance and the aforementioned webp image serving issue raised on the original thread.
I am wondering if there is a way to use one image block and set it to pull different images for different device breakpoints or if I have to duplicate the image block and set a different one for each breakpoint.
I tried just switching from desktop to mobile and changing the image but that changes it for desktop as well.
@smontreuil, your instincts are correct that you will need different images for each breakpoint using this approach.
One thing I will contribute that hasn’t already been mentioned explicitly is that there is a distinction between a content image and purely stylistic image.
It has long been recommended to keep purely stylistic or thematic images (i.e. ones that you could exchange for other ones if redesigning the website theme) in the realm of CSS and to have content images (i.e. ones that are directly part of the content of the page) in the realm of the page markup.
So, while interchanging between css backgrounds and img tags may have some short term benefits as a workaround to some technical limitations, using an img tag to load in stylistic images is something best avoided whenever possible.
An easy way to visualise which is which, is to look at the page with CSS turned off. The images you still want to be displayed in the plain unstyled markup are content images, anything else is purely presentational.
Not at all, because it is entirely possible to add content images within a template (e.g. having a front page template containing a featured posts grid with a featured image for each post - the featured image will likely be a content image).
I’m simply commenting on the fact that there are differences between purely presentational images and content images.
Once you have established which type of image you are adding, it becomes clearer which method you can use to add it.