Image not resizing in advanced container setting

I’m trying to convert a theme of mine from something that didn’t work to GeneratePress (which isn’t working so well now, either).

I’m using the advanced settings for Backgrounds on a full-width container. I’ve set the same image three times: one for desktop; one for tablet; one for mobile. On the first, I set it to the full image; on the second, to medium; and on the third, to thumbnail.

As near as I can tell, the image is displaying at the same size on all three device selections. Since it’s a picture of me, full-width, the result is that on desktop, it looks fine; on tablet, the left half of my body is missing; on mobile, you don’t even see me, but only a wall on that side of the image which is showing (my whole body is out of frame).

I have even tried uploading different sizes of the image, and choosing successively-smaller versions for each type of device AND choosing the different sizes as mentioned above from the drop-down box for choosing the size.

It doesn’t matter.

And, yes, I purged the cache.

The page is at https://staging7.fresnoinjurylaw.com and I have temporarily turned off the need to type a password to see that URL.

Hi Rick,

You can setting a specific background-position as such: Edit Page “Generated Homepa...

The first value is percent from the left, and the second is from the top.

More info on background-position here: background-position - CSS: Cascading Style Sheets | MDN

Also try setting it to full-width so it’s not pixelated.

Kindly let us know how it goes.

It’s better, and I can live with that, if that’s how it has to be.

But I thought you were supposed to be able to put different sizes of images for each one, with the idea that you could show the same image and have it all LOOK the same, on different-sized devices.

Anyway, if you look at it again, you can see that your idea makes it look better. It’s just not exactly what I was trying to do.

Thank you.

Yes, you could put different sizes of images. That should work, and that’s actually great.

Take note however that for instance, if you put a small sized image of the full version for mobile, then you set the image size here to thumbnail: Edit Page “Generated Homepa..., that may make small dimension file image even smaller.

In essence, since you’re already using an image with a smaller dimension, you may want to set the image size to full so it would retain the dimension you want. Setting it to thumbnail crops/resizes it to an even smaller image which may not be what you want.

Hope this clarifies!

1 Like

Well, sad to say, it doesn’t work. You can add three background images, and select a smaller image from the Media Library for each one, but they’re all going to show up the same size on the website, no matter what.

All I’ve been able to do is move them around using the Position input, and sometimes even that doesn’t seem to work right.

Hi Rick,

Here’s a sample from my test site: Edit Page “Generated Homepa...

As shown, I uploaded a 1024 x 683 px image for desktop at full width. Then, for tablet, I have a 600 x 400 px image.

Here’s a screen recording: Screen Recording 2022-06-15...

Kindly observe that that image file name in the source changes(from medium.jpg to large2.jpg), that is, advanced background images are indeed the ones being used in the respective views I set them to appear.

Can you check to source of the images as well from your end and see if the files being used are the ones you’ve set?

With regards to the position, may we know what’s occurring?

Kindly let us know.