Manipulate how a background image of section scales / is positioned when viewed on a mobile

[smokingjacket]

Hello,

My website is http://smokingjacket.london - I would like to have greater control over how the background image scales and/or positions when viewed on a mobile phone as it tends to cut off a crucial part of the image.

Please could someone advise? I am hoping for a CSS solution.

Thanks!

[jade]

Hi Chiara,

It seems that you are using a Classic Section. To achieve what you are trying, please add an ID to the section then target that section using the ID you have added to add a custom CSS.

Then please add this code in the Global CSS:

@media (max-width: 480px) {
   #the-section-ID {
        background-size: contain;
        background-position: center center;
    }
}

https://www.w3schools.com/css/css_background.asp

Please note that the code above assumes that the ID you have assigned to the section is the-section-ID. Please change it if you used a different ID.

Hope this helps.

[smokingjacket]

Thanks very much!

[friech]

We are delighted to assist you with this.

Cheers!