Background image size on mobile.

Hi there,

Background images aren't responsive by nature. I would recommend setting one specific for mobile using this CSS:

@media (max-width: 768px) {
    body {
         background-image: url(http://MOBILE-IMAGE-URL);
         background-size: auto;
    }
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

Let me know if this helps :)

I added the CSS and optimized the background image for my phone. I used the proper sizing, aspect ratio, and PPI for my iPhone 8, but the image is still extremely zoomed-in. Please see the attached pictures. You can visit the site on your mobile device by going to: https://staging5.saltwater-recon.com/

https://imgur.com/UIKcaY5
https://imgur.com/Cbgj7Tp
https://imgur.com/dIixx0h

Can you try the edited CSS?
https://generatepress.com/forums/topic/background-image-size-on-mobile/#post-740338

It's showing errors in the CSS. It still didn't work.
https://i.imgur.com/5hMAI8q.png
https://i.imgur.com/5Co7wXl.png

Edited: https://generatepress.com/forums/topic/background-image-size-on-mobile/#post-740338

Is there a way to make the image fixed?

It should be already fixed no?

Keep in mind you have a long image.

It was repeating and wasn't fixed. It scrolls as I scroll. I want it to stay fixed.

I now see just a background color?

Honestly that's a good solution. Hard to make background image looks good on mobile.