Archived topic
Ideal Mobile background Image size
3 replies · Started by Forum User on March 14, 2022
What is the ideal "mobile" background image size to avoid having the image look blurry? My current mobile background image is centered the way I want it to be, but a little blurry. https://magicalearthretreat.com
@media (max-width: 768px) {
.gb-container.gb-container-d038e518:before {
background-position: 47% 10%;
}
}
@media (max-width: 768px) {
.gb-container.gb-container-d038e518:before {
background-image: url(https://magicalearthretreat.com/wp-content/uploads/2022/03/Hobbit-experience-Hocking-Hills-e1646671424231.webp)
}
}Hi there,
thats because your original image is 765 x 686px wide which is not particularly high res and more importantly is quite a square aspect ratio.
The background-image size is set to Cover so it covers the entire container background. On a narrow portrait mobile screen the browser has to scale that image up hugely to fill the height of the container. And in doing so the image becomes blurry as the browser has to fake pixels to fill in the gaps.
Options:
a) add a higher resolution image - but be mindful of file sizes.
b) use an image that has a portrait aspect ratio.
Thank you David.
You're welcome
