- This topic has 9 replies, 2 voices, and was last updated 5 years, 5 months ago by
.
-
Posts
-
Is there a way to adjust the background image size for mobile devices so that it displays similar to that on laptops/desktops? The mobile background displays extremely zoomed-in. I tried the 100% width, but that didn’t work properly. Thanks.
This is how it looks on my laptop. https://i.imgur.com/BuqqhEH.png
This is how it looks on my iPhone. https://i.imgur.com/dIixx0h.jpg
Customer Support
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/
Can you try the edited CSS?
https://generatepress.com/forums/topic/background-image-size-on-mobile/#post-740338Is 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.
- You must be logged in to reply to this topic.