Blurry compressed image when on mobile preview

Site URL: https://bagpipe-swordfish-5feg.squarespace.com/

Hello, 

On my blog dekstop page, the background image that I have behind my blog links looks as it should. But when I switch to mobile view, the image adjusts and becomes blurry. Is there something with the css used for the background causing the blurry compression? 

https://bagpipe-swordfish-5feg.squarespace.com/

password: home

Thanks!

On 12/25/2021 at 4:17 AM, tuanphan said:

Don't remove any code in your current code.

Add this to Design > Custom CSS

/* Mobile blog image */
@media screen and (max-width:767px) {
.blog-masonry.collection-content-wrapper {
    background-size: cover;
    background-position: 50% !important;
}
}

 

Thank you once again Tuan! If I wanted to adjust the height position of the image, what additional code would that be?

On 12/27/2021 at 2:55 AM, katierelease said:

Thank you once again Tuan! If I wanted to adjust the height position of the image, what additional code would that be?

adjust these values

/* Mobile blog image */
@media screen and (max-width:767px) {
.blog-masonry.collection-content-wrapper {
    background-size: cover;
    background-position: 50% 40% !important;
}
}

3 hours ago, tuanphan said:

adjust these values

/* Mobile blog image */
@media screen and (max-width:767px) {
.blog-masonry.collection-content-wrapper {
    background-size: cover;
    background-position: 50% 40% !important;
}
}

 

Thanks Tuan, I tried the code but the image isn't adjusting height-wise. The second value won't move the image up and down.

Try this

@media screen and (max-width: 767px) {
    .blog-masonry.collection-content-wrapper {
        background-size:cover;
        background-position-x: 37% !important;
        background-position-y: 100px !important;
    }
}

16 hours ago, tuanphan said:

Try this

@media screen and (max-width: 767px) {
    .blog-masonry.collection-content-wrapper {
        background-size:cover;
        background-position-x: 37% !important;
        background-position-y: 100px !important;
    }
}

 

Great, thanks Tuan!