Dynamic Image Background Sizes

With the release of 1.5 I am wondering if we will see the ability to set different image sizes for mobile/tablet.

To help increase LCP scores it is beneficial to select different image sizes for mobile/tablet/desktop. I already take advantage of this feature in GenerateBlocks Pro, but am unable to make use of the same idea when it comes to Dynamic data either part of the 1.5 update or part of even GeneratePress’s Elements feature.

The big aspect on where this is helpful is the following example.

  1. Setup a high resolution (1500-2000px wide) featured image for a page.
  2. Then create a container block as a hero element at the top of the page and set the background to be pulled dynamically from the page’s featured image.
  3. Under the background image settings allow the image size selection to be linked to the current responsive section (IE desktop/tablet/mobile).
  4. This would allow me to use a full size background image for desktop, while drastically lowering the LCP by loading a medium image size on mobile.

Yes, it would be a great addition.
I was quite confused that the container block had desktop & mobile options for background, but changing the background in the mobile section also changed the desktop background.

In the pro version of the plugin you can click advanced background and in that window it does allow you to set different images for desktop and mobile. I just was hoping we could have that be dynamic as well.

vns wrote:

I was quite confused that the container block had desktop & mobile options for background, but changing the background in the mobile section also changed the desktop background.

I am unable to get this to work at all, because I see the same thing you’ve mentioned here: adding different backgrounds for different devices looks like you’re doing something. But on the front-end, I’m only seeing the same image regardless of the device. (I was searching for information on that, which is how I ended up reading this thread.)

Generally-speaking, I’m finding that most of the device-specific settings don’t work for me. I’m thinking I’m going to have to write CSS media queries.

Not sure if this will help a couple people on here posted the different backgrounds doesn’t work for them. a couple simple things I had to learn hard way, target → self. And make sure advanced toggle is turned on. This allows a stretch banner on desktop and a different image on mobile.

The psuedo target is cool for instance, you can have two different images on desktop, one self and one psuedo then change “State” on hover it switches. I have used that for before and after for finding diseases in the eye. pretty cool effect.