Docs

[cpb1g13]

Hi,

I have added a background image to a section and it does not seem to respond on small or extra small devices. The image is the same size as the container, 1500 X 750.

I have adding different CSS codes found on the forum, but none seem to solve the issue.

I’ve attached two screenshots: one as it’s meant to appear, on an extra large screen, and the other on an extra small screen.

Can you please advise?

Thanks,

Callum.

Url: pocketrad.com
Worpress version: 4.6.1
X version: 4.6.4
Cornerstone version: 1.3.3

[Joao]

Hi There,

You need to right on the Style box of your section:

background: contain

You will find the option on the bottom of the Cornerstone Section Tab

Hope it helps

Joao

[cpb1g13]

Thanks Joao. That did seem to improve things, but there’s still quite a difference between screen sizes. See the screenshots, if I move the position of the phone in the image to position well on mobile, it’s out of position on desktop, and vice versa. How can I make the section responsive to the point where the relationship between text and background remains the same between mobile and desktop?

Regards,

Callum.

[cpb1g13]

2nd attachment..

[Rad]

Hi there,

Desktop and mobile have different screen sizes, background image relies on its container not the same how standard image works.

It will not display 1500×750 on mobile like from the desktop. If you added it as the standard image (eg. <img>), it will then respond.

If you prefer to maintain image aspect ratio and content overlays, you should use rev. slider and composer your layers and maintain aspect ratio.

Thanks!

[Author]

Posts