I don't want a background image to scale

Support
#1

Wordpress: 6.5.3
Pro: 6.4.19
Site: reidfranklin.com
Menu: What We Do | Fundraising | Strategic Planning

Notice: circle motif background image

View on a phone and the image has scaled down to the point it isn’t visible. It’s there you can pinch to zoom and see it. It looks how it’s supposed to on the desktop, laptop, and tablet breakpoints. It’s acceptable on the next breakpoint down. But completely invisible on a phone.

What it looks like on an iPhone not zoomed in.

Screenshot 2024-05-08 at 10.05.27 AM
Screenshot 2024-05-08 at 10.05.27 AM642×1389 406 KB

Background image settings: Section1 | Setup | background advanced | background layers | lower | type: background image | repeat: both | size: 40% | position: center | parallax: off | Upper | type: none

Original image size 1380 x 1380.

To be clear I only want this image to not scale and it will be on multiple pages.

Any help would be greatly appreciated.

Best.

#2

Hello Tim,

Thanks for writing in!

If you do not want your background image to scale, the background size should be set to contain.
Background image settings: Section1 > Setup > background advanced > background layers >
- Lower > type: background image > repeat: both| size: contain | position: top center | parallax: off
- Upper > type: none

For more details about how the background images work, I would like you to try this demo here:

Best Regards.

#3

Thank you for your time it is much appreciated.

That how ever does not accomplish what I am trying to do.

I have made a background image that does need to be reduced to 40%. For some reason at the phone portrait and landscape breakpoints it is reduced further in size. I wanted to maintain the 40% size reduction uniformly across all breakpoint renderings.

I suspect it’s because the original image is wider than the screen size, and it’s being reduced to fit.

Is there anyway to prevent that from happening?

I considered reducing the original image to 40% only it still is wider than the screen size. This is due to it needing to be able to seamless tile across the page.

Thank you.

  • Tim
#4

Solved.

Reducing the image didn’t help because it was still wider that the screen size.

I found an even smaller xy seamless tile that I saved out from photoshop. The new tile is smaller than the screen size at the smallest breakpoint.

Then using…

background advanced > background layers >
Lower > type: background image > repeat: both | size: none | position: top center | parallax: off

It works.

#5

Hey Tim,

Its good to know that you have resolved your issue. Thanks for letting us know.

Cheers.