Change index page background image on Brine mobile & tablets

I have am using a Brine/Moksha template and, on various pages, I need to change the background image to a different image when on mobile/tablets. Does anyone have script/html solution for this that I can inject in header? or css? See https://yelar.squarespace.com/hi-im-barbara-on-home for an example.

Try this guide

also, wrap the code in 

@media screen and (max-width:900px) {

paste the CSS for mobile, tablet here, remember removing style

}

I forgot a critical piece of info... these are all INDEX PAGES.

So, what I tried didn't work! 

But here's what I tried in PAGE HEADER CODE INJECTION:

@media screen and (max-width:900px) {

main.Main {
    background-image: url(https://static1.squarespace.com/static/5dade9b43aae383ce86b5c91/t/5db72a9fb8949143ca9237d0/1572285095291/laura-thonne-8CJ6HSeCWU0-unsplash-614x1024-1.jpg), !important;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}
}

On 1/13/2020 at 11:32 PM, karen.sale said:

I forgot a critical piece of info... these are all INDEX PAGES.

So, what I tried didn't work! 

But here's what I tried in PAGE HEADER CODE INJECTION:

@media screen and (max-width:900px) {

main.Main {
    background-image: url(https://static1.squarespace.com/static/5dade9b43aae383ce86b5c91/t/5db72a9fb8949143ca9237d0/1572285095291/laura-thonne-8CJ6HSeCWU0-unsplash-614x1024-1.jpg), !important;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}
}

It worked or?

On 1/18/2020 at 3:52 AM, tuanphan said:

It worked or?

Hi tuanphan,

First of all, thank you for contributing so much to this forum.

I am experiencing the exact same issue with my website – I am using the Brine template and need to change my background image when in mobile view. The current background image is loaded via the index page (Page Settings—Media—Banner/Thumbnail Image). I added the following code to the Page Header Code Injection area, but it has not changed my image:

@media screen and (max-width:640px) {
main.Main {
    background-image: url(https://static1.squarespace.com/static/57bd374c29687f7de41f9079/t/5f7d10f314c095073cbe324c/1602031863871/Brig+Urias_Web_Backgrounds-05.png) !important;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}
}

My current background image still displays after inputting this code. Can you please offer any assistance on how to fix this problem? The url is brig-urias.squarespace.com

I

14 hours ago, brigurias said:

Hi tuanphan,

First of all, thank you for contributing so much to this forum.

I am experiencing the exact same issue with my website – I am using the Brine template and need to change my background image when in mobile view. The current background image is loaded via the index page (Page Settings—Media—Banner/Thumbnail Image). I added the following code to the Page Header Code Injection area, but it has not changed my image:

@media screen and (max-width:640px) {
main.Main {
    background-image: url(https://static1.squarespace.com/static/57bd374c29687f7de41f9079/t/5f7d10f314c095073cbe324c/1602031863871/Brig+Urias_Web_Backgrounds-05.png) !important;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}
}

My current background image still displays after inputting this code. Can you please offer any assistance on how to fix this problem? The url is brig-urias.squarespace.com

If you insert CSS in Page Header, you need to wrap code in style tag

<style>

Your CSS code

</style>

2 hours ago, tuanphan said:

I

If you insert CSS in Page Header, you need to wrap code in style tag

<style>

Your CSS code

</style>

Unfortunately, adding the style tag did not change the background image for mobile view.

On 10/8/2020 at 9:56 PM, brigurias said:

Unfortunately, adding the style tag did not change the background image for mobile view.

Can you share site url? We can check easier.

On 10/10/2020 at 1:21 AM, tuanphan said:

Can you share site url? We can check easier.

Yes: brig-urias.squarespace.com

On 10/10/2020 at 1:21 AM, tuanphan said:

Can you share site url? We can check easier.

Hi tuanphan,

Here is the url: brig-urias.squarespace.com. Let me know if you have any issues accessing with that. If you're able to help me with this issue I would really appreciate it, as I'm still not able to change the background image in mobile view via the index page with the code as-is.

<style>
@media screen and (max-width:640px) {
main.Main {
    background-image: url(https://static1.squarespace.com/static/57bd374c29687f7de41f9079/t/5f7d10f314c095073cbe324c/1602031863871/Brig+Urias_Web_Backgrounds-05.png) !important;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}
}
</style>

<style>
@media screen and (max-width:640px) {
main.Main {
    background-image: url(https://static1.squarespace.com/static/57bd374c29687f7de41f9079/t/5f7d10f314c095073cbe324c/1602031863871/Brig+Urias_Web_Backgrounds-05.png) !important;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}
  section#home-1 figure img {
    visibility: hidden;
}
}
</style>

@tuanphan I want to change a banner image on mobile, as well.  However, it is the second page in an index - and the code above doesn't seem to be working.  

Here is a screengrab of the section I'm wanting to change, with the skeleton background

https://share.getcloudapp.com/bLu0wKwG

Website https://magnolia-amethyst-e4m9.squarespace.com/ pass thankyourebecca

15 hours ago, HannahZoe said:

@tuanphan I want to change a banner image on mobile, as well.  However, it is the second page in an index - and the code above doesn't seem to be working.  

Here is a screengrab of the section I'm wanting to change, with the skeleton background

https://share.getcloudapp.com/bLu0wKwG

Website https://magnolia-amethyst-e4m9.squarespace.com/ pass thankyourebecca

You mean Welcome word or note section??

6 hours ago, tuanphan said:

You mean Welcome word or note section??

@tuanphan yes, exactly 💥

On 12/10/2020 at 12:30 AM, HannahZoe said:

@tuanphan yes, exactly 💥

Hi. Did you remove both? I don't see them now..