Replace background image on mobile

I am still wrestling with this header and would love any help the community could offer.

The easiest way is insert 2 images. Then use code to hide Mobile Image on Desktop, hide Desktop Image on Mobile.

You can do that, then share url again. Members on forum will help you.

Thanks for the quick reply!

But I'm not sure how to upload 2 images. Right now I have one image set as the block background. I'd like to replace it with a media query.

If I could upload 2 background images, it should be easy to hide them as needed, but I don't see an option to load second image.

Add to Home > Design > Custom CSS

@media screen and (max-width:640px) {
.homepage article section:first-child img {
    object-position: 90% 10% !important;
}
.homepage article section:first-child {
    padding-top: 0 !important;
}
}

Thanks. I've posted the code, but I'm not totally sure what that does.

@tuanphan

I would like to do the same. Your code snippet: what does it do?

My site: https://thermodynamx.squarespace.com (public)

> Klick on »Kontakt« on top right. On mobile it looks like this:

2 hours ago, djm said:

@tuanphan

I would like to do the same. Your code snippet: what does it do?

My site: https://thermodynamx.squarespace.com (public)

> Klick on »Kontakt« on top right. On mobile it looks like this:

 

@media screen and (max-width:767px) {
[data-section-id="5e71026ea0c7907f72f1e5a1"] .section-background img {
    object-position: 90% 50% !important;
}
}

2 hours ago, tuanphan said:

@media screen and (max-width:767px) { [data-section-id="5e71026ea0c7907f72f1e5a1"] .section-background img { object-position: 90% 50% !important; } }

Thanks @tuanphan

I see what you are doing here. But is there no way of changing the picture entirely? There’s just no way to display a portrait photo on mobile:

On 4/29/2020 at 10:06 PM, djm said:

Thanks @tuanphan

I see what you are doing here. But is there no way of changing the picture entirely? There’s just no way to display a portrait photo on mobile:

You can set new image on mobile. If you like this ideal, please let me know, I will give the code

On 5/2/2020 at 4:25 PM, tuanphan said:

You can set new image on mobile. If you like this ideal, please let me know, I will give the code

@tuanphan Yes, that would be great.

On 5/4/2020 at 10:21 PM, djm said:

@tuanphan Yes, that would be great.

Missing your comment. Have you solved yet?

@tuanphan no, not yet. Any ideas?

1 hour ago, djm said:

@tuanphan no, not yet. Any ideas?

@media screen and (max-width:767px) {
[data-section-id="5e71026ea0c7907f72f1e5a1"] .section-background img {
    visibility: hidden;
}
[data-section-id="5e71026ea0c7907f72f1e5a1"] .section-background {
    background-image: url(https://beaverhero.com/wp-content/uploads/2020/05/ss-team01-min.png);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
}

Thank you @tuanphan, this works perfectly. 😃

Is there a way to do this same concept, but with an image placed on your page, not a background image in your banner? 

10 hours ago, LizzyJo said:

Is there a way to do this same concept, but with an image placed on your page, not a background image in your banner? 

Yes. If you share link to your site, we can check easier.

@tuanphanThank you! The website is www.weareloudcommunity.com

On 7/16/2020 at 11:22 PM, LizzyJo said:

@tuanphanThank you! The website is www.weareloudcommunity.com

Add to Home > Design > Custom CSS

@media screen and (max-width:640px) {
div#block-yui_3_17_2_1_1594858759957_4467 {
    background-image: url(https://beaverhero.com/wp-content/uploads/2020/06/twitter-292994_640.jpg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
div#block-yui_3_17_2_1_1594858759957_4467 img {
    visibility: hidden;
}
}

@tuanphan Awesome! Thank you! I uploaded and replaced my own gif, but now the top and bottom get cut off, I changed the new image shape to square. How can I get it to fit correctly?

Hi Tuan! 

Is there any way you can help me with 2 things?

1) hide a banner image for a specific index page 

2) resize the vh of the banner image

I can't seem to target the banner image.

Currently, I have the code. The adding of the image is fine, but the original banner image is still there and sticks out from underneath.

https://lauren-soto-wjl8.squarespace.com/ PW: hello

Thank you! @tuanphan

Quote

@mobile:  ~"only screen and (max-width: 640px)";
@tablet:  ~"only screen and (min-width: 641px) and (max-width: 949px)";

@media @mobile {
#picture-1 img {
display: none;
}

#picture-1 .sqs-block-image img {
display: block;
}

#picture-1 {
background: url('https://static1.squarespace.com/static/59074252f5e2319ca143b4c0/t/5f239323bcdb807c8a87030a/1596166951242/About+%283%29.png');
background-repeat: no-repeat;
background-size: 100%;
}
}

https://static1.squarespace.com/static/59074252f5e2319ca143b4c0/t/5f239323bcdb807c8a87030a/1596166951242/About+(3).png

1) hide a banner image for a specific index page 

all devices or mobile only?

2) resize the vh of the banner image

You mean banner image or background image (inserted by your CSS)?

@tuanphan Just mobile / tablet versions.

and 

Banner image!