CSS scrolling pictures on mobile

Highlighted
New Member
2 0 0

Hi

I have just added a scrolling-parallax effect background feature to two sections of my website homepage: www.centroartesano.es. I'm using the CSS editor for my theme. The desktop view looks fine but the mobile version, background pictures are blurred. I understand that the scrolling effect doesn't work well in some devices, so I just want a background covered pictured for my mobile version. I have created a similar photo and cropped to fit the mobile version. To my understanding, the best way to do this is by using a media query for the mobile version. I have added the following but it doesn't seem to be working. I use the Flex theme, from Out of the sandbox.

 

Does anybody know why this is not working? to my understanding, it should

 

.section {
padding: 146px 10%;
background-image: url(https://cdn.shopify.com/s/files/1/0081/1859/9740/files/untitled_design__53.jpg?v=1594296633?v=159428...);
background-size: 100%;
background-attachment: fixed,scroll;
background-repeat: no-repeat, repeat;
background-size: cover;
background-size: cover;
background-position: 50% 50%, 50% 50%;
}
.img {
height: auto;
width: 100%;
margin-left: auto;
margin-right: auto;
display: block;
}


.image-element__wrap img {
border-radius: 25px;

}

.text-slideshow-column {
border-radius: 15px;
border-style:solid;
border-color: #d2c0fc;
border-width: 8px;
}

@media only screen and (max-width: 600px)
.section {
padding: 150px 0px;
background-image: url("),url("https://cdn.shopify.com/s/files/1/0081/1859/9740/files/untitled_design__56.jpg?v=1594390424?v=159092...);
background-size: cover, cover;
background-attachment: scroll, scroll;
background-repeat: no-repeat, repeat;
background-position: 50% 50%, 50% 50%;
}

0 Likes