Can I use a different header background image on desktop and mobile?

Hi there,

if you have GenerateBlocks Pro then you can use the Advanced Backgrounds:

https://docs.generateblocks.com/article/advanced-backgrounds/

there you can add as many background images as you require.

If you don't have Pro then let me know and we can provide some CSS.

Aloha :)

Can the images defined in 'Advanced Backgrounds' be dynamic ... ie. featured images?

Would it be the same process? ie. add a static image from the media library, the override with the dynamic button displayed for the container widget?

Thanks :)

- Bill

Hi Bill,

Can the images defined in ‘Advanced Backgrounds’ be dynamic … ie. featured images?

If the container block is set to dynamic background, the image URL you've assigned to the "Advanced" settings will be overwritten by the dynamic image source.

The rest of the options would still apply though. Advanced gradient would apply as well. :)

Would it be the same process?

Very similar.

ie. add a static image from the media library, the override with the dynamic button displayed for the container widget?

Yes but be reminded that it only works on Block elements. There are no dynamic features for Container blocks on contents of pages.

Thanks Elvin :)

I set up a:

1) Block element, added a Container, and set the background to Dynamic/Featured Image, and

2) created three Advanced Backgrounds, dumbing the image sizes down from Desktop to Mobile

But I don't see the Advanced images being pulled when I resize my browser.

Any ideas?

I tried with and without the 'Use Fallback image' toggled on.

I want to pull the featured image dynamically, but with the sizes as defined in Advanced Backgrounds.

Possible?

Much Thanks!! Hope your weekend was great :)

- Bill

Hi Bill,

Elvin's reply was actually saying the dynamic background image won't work with the advance background currently.

We are still working on this feature :)

I think you can try something like this, build 2 block elements, one for mobile and one for non-mobile:
https://generatepress.com/forums/topic/disable-header-hero-element-on-mobile/#post-2145954

Ahhhh ... got it. Thank you both :)

Just to confirm ..

The image size for dynamic images can be controlled with the regular 'Backgrounds' settings, but not the 'Advanced'background size settings. Sound right? This has been my experience.

Thanks for your solution :)

I actually built a single block element with three containers (each with a different sized background image), and use the Advanced 'Hide on ...' settings to control the visibility.

Does this seem an ok solution for you?

Having to built separate containers isn't ideal, but it does seem to work just fine :)

- Bill

.

The image size for dynamic images can be controlled with the regular ‘Backgrounds’ settings, but not the ‘Advanced’background size settings.

Yes, that's correct :)

Having to built separate containers isn’t ideal, but it does seem to work just fine 🙂

That's a smart workaround!

Thank you Ying! You all the best :)

You are welcome :)