[Resolved] Advanced Background?

[Rick]

In another thread, Ying said,

The advanced background is a feature of GenerateBlocks pro, if you have GB pro, you can choose different images/positions/size etc for different devices.

And I remember the last time I was building a site with GBPro being told the same thing.

But I couldn’t get it to work then, and I can’t get it to work now.

Using the Advanced Background feature, I have selected the same image three times, but then I have selected different media (Desktop, Tablet, and then Mobile), and set different image sizes for each one (Full, Large, and Medium Large).

Nevertheless, the image size never changes.

What I’m trying to do is to approximately replicate (but with some tweaks, because I’ve never fully liked the theme) what I have (WARNING: NSFW) at https://rickhorowitz.photography for the main page. (Again, WARNING, there are some artistic nude images on that photography website.)

What am I doing wrong?

Thanks.

[Rick]

Nevermind.

Apparently, it is working after all. It just isn’t working like I expected. And I need to stick with “Full” size and just move the coordinates around, apparently.

[Ying]

Hi Rick,

The image size in the advanced background image is the background image size, it’s a CSS property, not the image size that you can choose from Full, Large, and Medium Large.

For more info about the background image size: https://www.w3schools.com/cssref/css3_pr_background-size.asp

And if you are using the same image, the image URL field can be blank, they will inherit from the desktop (regular) background image URL.

Let me know if there’s anything else 🙂

[Rick]

Wait. What?

So does that mean that it’s just the dropdown choice that controls the size? For example, whether you choose “Tablet” or “Mobile” decides what size the image is?

Also, I tried deleting the URL fields from the Tablet and Mobile based on what you said, but if I do that, then the positioning no longer repositioned.

Clearly, I had a fundamental misunderstanding of how things were being sized. I think I get it now. But I’m not 100% sure.

Anyway, I’m on to the next problem (changing overlying font colors based on background image size).

[Ying]

For example, whether you choose “Tablet” or “Mobile” decides what size the image is?

No, you need to manually set up the background image size you want, for example, cover/contain/300px/80% are all value values for background-size property. It’s pure CSS knowledge.

I found you a better guide on this: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images

The tablet/mobile/desktop options are there to add different media queries to the CSS, for example, if you choose mobile, then the CSS generated by your settings will be added inside a media query like this: @media (max-width: 768px) {}, so the settings only apply to screens that are narrower than 768px.

Also, I tried deleting the URL fields from the Tablet and Mobile based on what you said, but if I do that, then the positioning no longer repositioned.

It should not. But make sure the regular background and advanced background selector/target are using the same thing, elementor pseudo-element. If you choose elementfor regular background, and pseudo element for advanced background, then you need to re-choose the background image, this is also pure CSS knowledge 🙂

changing overlying font colors based on background image size

You can’t change text color based on background image size or devices. For now, colors don’t have responsive options available, this will require custom CSS.

[Rick]

Ok. So, I know about the properties; e.g., size, position, etc., in CSS.

I guess the thing is that when I set up the background initially in the block editor, I have to make sure the fields in the regular area are blank, in order for the Advanced area settings to control.

I thought the Advanced area would override the settings, depending on the device, but that does not seem to be the case.

It appears that the problem I’m having is realizing how the graphical interface correlates to the CSS. I know sometimes when I can’t seem to get things working within the graphical interface, if I go to the custom CSS area, I can do what I want.

Just a learning curve, and the fact that I only design websites about once every year or so, so I end up re-learning things a lot.

Thank you for your patience, and your help.

[Ying]

Glad to help 🙂

I thought the Advanced area would override the settings, depending on the device, but that does not seem to be the case.

It should. The regular background is for general settings, it doesn’t have the media query. The advanced background will add specific media queries to the CSS and will override the regular background settings.

[Rick]

Then I must be doing something else wrong. I’ll have to poke around with it again this weekend.

[Ying]

Learning new stuff is exciting 😛

Enjoy it!

[Author]

Posts