How To Show A Different Background Image on Mobile in Squarespace 7.1 // Squarespace CSS Tutorial

[@InsideTheSquare]

⚠ IMPORTANT CSS UPDATE ⚠ When logging into Squarespace, if you see the word "Website" at the top of your menu, you are using their new internal navigation! To edit the CSS of your Squarespace website, click on the word "Website" and scroll to the bottom of the list of pages. Here you'll see "Website Tools" - click on that option and select "Custom CSS" to open the CSS panel and add your code here. For more information, watch this tutorial: kzbin.info/www/bejne/m6atonuOqMR_Z68

[@mattykasmuh]

It seems this last feature introduction decided it would change the data section id that I was targeting and rendered my previous CSS useless! Maybe something to watch out for. Thanks for the tutorial!

[@albertomanzo5546]

@@mattykasmuh my previous CSS was also useless can you explain how you fixed it

[@sarahpendleton5158]

This was the EASIEST way to do this I have seen from like 20 KZbinrs!!! Thank you so much for your awesome tutorial!

[@InsideTheSquare]

Yay - you are so welcome Sarah! I'm happy I could help 🥰

[@ToddLamming]

Ugh! Life saver. The fact squarespace cannot just get their head out their ass and build this feature in is mind blowing.

[@lucastestro]

Love these videos. One little addition that I think I got right, which might be useful to some people: if you have a background video on desktop that you're trying to replace with an image on mobile, then in the code snippet change "img" to "video". I couldn't get mine to work till I tried this.

[@InsideTheSquare]

Thanks for the tip!

[@KGPivots]

You are literally the best!!! Thank you for the clear, easy to follow explanations and the code being in the description!

[@InsideTheSquare]

You are so welcome 🥰

[@kateegan5084]

Would just like to say how unbelievably helpful your tutorials are. Thank you.

[@InsideTheSquare]

Thank you for letting me know - your comment made my day! 🥰

[@worklifesorted]

I have no experience with CSS but was able to follow your video to make it work. The only thing for me was that I wanted pictures to be replaced only on the home page, not the whole site. So I had to go into the page settings and add the code there with before CSS and afterwards. I found that in a different video, but hopefully it may help someone who sees yours. Thank you so much Becca. Definitely am following for future support.

[@InsideTheSquare]

Glad it helped & thanks for the tips! :)

[@DarrenMurphy-g6s]

Hi would you have the link for this video. Im having the same issue you are mentioning above and don't know where to add the

[@DevinCope-l9t]

How would I go about doing this with 2 different videos. One video for desktop and one video for mobile?

[@InsideTheSquare]

You can create a custom layout for mobile using the technique in this tutorial: insidethesquare.co/squarespace-tutorials/custom-mobile-layout Hope that info helps and best of luck with your project! :)

[@thisisALI.i]

thanks sooooo much. At first it went on every page but then i watched your other video and i put it on just one. You're a big help

[@InsideTheSquare]

Yay - so glad I could help! 😁

[@adrianlopezpelayo4795]

solved just with the focal point, thank you sooo much!

[@InsideTheSquare]

Awesome! That little circle is such a rad and often overlooked feature - glad that was all it took 🙌

[@douglasmcorso]

Thank you very much!

[@InsideTheSquare]

You're welcome! :)

[@arxhgoulis63]

really helpful thanks!

[@fionaroutledge5455]

Perfect thank you so much, focal point! What a game changer.

[@InsideTheSquare]

You're so welcome - happy to help! :)

[@dashconsulting3852]

You saved my life with that focal point trick. Thank you!! 🙌

[@chanteltaite3304]

this was extremely helpful. you are so fireee. thank you so much.

[@InsideTheSquare]

Yay - so happy my tutorials are helping you rock your Squarespace site 🥳

[@tashicreative1782]

Thank you for this content. Does this work with videos?

[@shayla_dawn]

YOU ARE AMAZING!! Thank you once again - Squarespace life saver :)

[@InsideTheSquare]

Aw thanks Shayla! Happy to help 🥰

[@marybaker7638]

Thanks! This saved me!

[@InsideTheSquare]

You're welcome - happy to help!

[@corsidenMSU]

So clear and exactly what I needed!

[@InsideTheSquare]

You’re welcome! Happy to help. 😎

[@treycook9814]

Thank you (again!) for making these videos! Suuuuper helpful! You are my go-to Squarespace guru! :)

[@InsideTheSquare]

You are so welcome! I’m happy to hear that my work is helping you with yours! ☺️

[@ryangodfreyj]

Thank you! What about on a CMS page like a blog or portfolio page where you can’t inject the header code?

[@InsideTheSquare]

You can use a code block, but you do need to label it as a style code just like you do for page header code injection. I have more info about that in my free css basics guide at insidethesquare.co/learn

[@sharlacrowie5948]

Does this work if you have an uploaded video for the background on the desktop site? I have tried using this code, but it didn't work.

[@InsideTheSquare]

That doesn’t sound right! I would love to help - send me more info at insidethesquare.co/code-help and I’ll hop into your source code and take a look.

[@hdmanchester4894]

@@InsideTheSquare Hi - having the same issue here did you manage to resolve :)

[@hdmanchester4894]

@sharla_crowie

[@johnnysjumps]

🙏 thank you - very helpful

[@InsideTheSquare]

You're welcome - happy to help! 😁

[@Decatilinae]

Best dev on Squarespace... Are you planning to make some tutorials on Developer mode?

[@GilesOji-no7dr]

how do you make the change apply on only one page? when i do this it changes the section of every page on my site

[@InsideTheSquare]

Great Question! Adding code to your site-wide CSS file under design > custom CSS will put your code on every page. But there are two ways to add code to a single page - check out this tutorial for more help: insidethesquare.co/singlepage You can also use a unique block ID to target a specific thing on your site; check out this tutorial for more info: kzbin.info/www/bejne/nmnUl42alqaHmLc Hope that helps! 💙

[@joshhunter4992]

Excellent tutorial. Thank you for sharing this! I was stuck... but, no longer!

[@InsideTheSquare]

Yay - happy I could help Josh! 😁

[@ateliercreativeuk]

Hi! Great tutorial! Soooo helpful! Is there anyway of doing this with full bleed galleries? I have effectively a full bleed gallery acting as a rotating banner at the top of my website, but it looks pants on mobile devices! Any help would be so much appreciated :) xx

[@InsideTheSquare]

Hey Claire! Totally possible but the proportion you'll need to code will be specific to the images you are using. Feel free to submit a code help request with more info here: insidethesquare.co/code-help

[@julianna8275]

Loved this tip! Though how do I have a separate background photo in mobile view for a different page?

[@InsideTheSquare]

You can use page header code injection to apply code to a single page. Here is a tutorial with more info: insidethesquare.co/singlepage

[@inglorious3559]

Just a little troubleshooting tip if this isn't working for someone. If you have any effects on the background image, it would not work. At least so far I haven't found a workaround for it but if you're wondering why it doesn't work for you, set the background image effect to "None" and it should work flawlessly.

[@InsideTheSquare]

Thanks for adding this note! Background art is a brand new feature that launched this month, so I am still in the process of updating all my background tutorials. With Squaresapce always making changes at least I am never bored 😅 haha

[@matthewdix9753]

Wow thank you so much! This totally worked and was exactly what I needed to do!!

[@victorgrandamancebo5582]

nice! you saved me big time, it was not working for me and I noticed I had an effect on my image. now its fine thx

[@MissNeverending]

Hi! Thank you for providing such great tutorials! At first it worked like a charm - I was able to get the code right and change my mobile banner image. But when I copy and paste the code in Page Settings - Advanced, my desktop image is showing again and not my new image. Back to square one! Help, what am I doing wrong?

[@vanjawilcox1493]

This was my exact problem too! At first removing the background worked but the new image did not upload. And when I tried to put it in the page header code injection even between the ....nothing was happening.

[@MigrationmediaAu]

Did you guys find a solution to this, I am having the same problem, want to add different images to the other pages

[@MigrationmediaAu]

@@vanjawilcox1493 Did you guys find a solution to this, I am having the same problem, want to add different images to the other pages

[@snxwbunny2870]

@@MigrationmediaAu I figure it out . You just have to put at the top and at the bottom again and it should work

[@adrienbisset9237]

100% clear! and thanks so much for the explanation. Now my case is 99% the same but instead of a different image file on desktop and mobile, i'd like to use a different video file. It is located in the first section of my home page just under the header. if anyone with better knowledge than me could tell me what the custom CSS would turn into, that would be amazing! thanks for the help 🙏

[@InsideTheSquare]

Hey Adrien, I would love to help by jumping into your code. Feel free to submit a code help request here: insidethesquare.co/code-help

[@justine4677]

This is great thank you, is there anyway to change the section height on mobile only?

[@InsideTheSquare]

Great question and yes - totally possible! Check out this tutorial for more info: insidethesquare.co/squarespace-tutorials/custom-mobile-layout

[@raul2839]

What about if I want to show a video in that area? on top of background?

[@MigrationmediaAu]

Thank you for adding these videos, keep them coming! On this particular tutorial, when i add the code onto the custom css it changes the background image for all pages, which is better than having bad looking backgrounds, however, anyway to change each pages background image since when i add this code to the advanced section is shows the text code over the top of the desktop site version background

[@InsideTheSquare]

If your adding code to a single page using page header code inject or an on page code block, make sure you add your code between two style brackets like this: code here Both of those spots can have other types of code like HTML and JavaScript so you have to tell a browser that it's Cascading Style Sheet code by labeling it style. This tutorial goes over the step by step process of you wanna check it out: kzbin.info/www/bejne/oYmZnIWgeMetq5o

[@VandeeTV]

thank you !!!!!!!!!!!!!!!!!!!!!!!!!!!!!

[@InsideTheSquare]

You’re welcome! Happy to help. 😎

[@jonnytjams]

Can this be done with video as well?

[@InsideTheSquare]

Great question! I'll have to brainstorm on this one so stay tuned!

[@mixtmmm]

Cool, is there a code for a computer version?

[@InsideTheSquare]

Give this tutorial a try: insidethesquare.co/squarespace-tutorials/background-image

[@aleinaradovan7763]

Hey Becca! Is there a specific addition of code so I can do this on a lock screen page?

[@Ackerman61]

Hey there - thanks - I'm trying to change the cropping of the background image in a section on mobile (moving the focal point didn't work because I am going vertically) and I'm just confused about the section id code I have: section[data-section-id="66631b6d8b59727df411e706"]. I'm not sure what part of that, or where to insert that in your code in order to identify the section.

[@InsideTheSquare]

You can add it before the section background selector. Here is an article with a little more info about how to target specific things in your site using a unique ID. I hope it helps & best of luck with your project! :) insidethesquare.co/resources/squarespace-css-targeting-tips

[@TimothyValentin-sh7jp]

this is great and exactly what i needed! but is there a way to do it where this only effects a specific page for mobile instead of mobile pages in general?

[@InsideTheSquare]

You can use a unique block ID to target a specific thing on your site; check out this tutorial for more info: kzbin.info/www/bejne/nmnUl42alqaHmLc

[@mitch.wallis]

Do you know if this applies to gallery carousels? If not - do you have code to replace a carousel image with a dedicated mobile image?

[@InsideTheSquare]

I would love to help - send me more info at insidethesquare.co/code-help

[@leafsilver3807]

Thank you for this tutorial! Does this still work with the new SQSP "site styles" update? There doesn't seem to be anyplace to access the CSS for individual pages anymore.

[@thierryleconte7807]

Amazing Tutorial - Question can I add an image (not a background image) on a particular section to only appear on mobile but not desktop?

[@InsideTheSquare]

Great question - and totally! Use the same concept and isolate the image by it's block id.

[@shizok8064]

do i need a computer to do this? or can i use mobile device? thx

[@InsideTheSquare]

Hi Shizok! I would recommend using a computer to add custom code to your site.

[@shizok8064]

@@InsideTheSquare maybe santa will help me this year. i been good 🤣

[@dogoodlabs9928]

hi there, can we apply this to full slideshow blocks instead of background img?

[@bradleyaldridge1596]

Hi there, great video thank you so much! I have been able to make this change for one picture on my mobile version, however, I need to replace a total of two images in different sections on my mobile sight. Duplicating the code and replacing the nth-child with the other section and using the image URL doesn't seem to be working. Can you help?

[@InsideTheSquare]

Check out this tutorial that will teach you how to create an alternate layout for mobile: kzbin.info/www/bejne/d4LRqJufqaqkpKs

[@WatchKreateTV]

Any way to do this using personal features?

[@InsideTheSquare]

Totally! You can use an on page code block or target the data section id in your side wide CSS. Check out my free intro to css video for an overview on your options: kzbin.info/www/bejne/fYDdoauig55pqLs

[@tabithara1]

Thank you so much for this tutorial! With this update, I can't see where to 'manage images' so I can upload the new image I want to use for mobile, so I can get the URL to pop that URL into the code... I'm hoping you can help - I can't find this info anywhere...

[@InsideTheSquare]

They moved it above the CSS panel and renamed it "custom files" You can learn more about the updated menu here: kzbin.info/www/bejne/m6atonuOqMR_Z68

[@TheArtress]

Thank you for sharing this!! This was by far the l clearest and easiest to follow along tutorial involving coding that I have ever seen! It went almost perfectly for me. I was hoping you could help with what went wrong. I added in all the code along with you in the CSS section and it changed to the image I wanted for the mobile version, however when I added in the nth-child part it switched back to the desktop image that is too big for mobile users. I'm not sure what went wrong and would love some help. Thank you in advance if you see this! :)

[@InsideTheSquare]

You're comment just made my day! But, bummer about the code not working. I would love to help - send me more info at insidethesquare.co/code-help and I’ll hop into your source code and take a look.

[@markphethean3831]

How do I do this for the header?

[@InsideTheSquare]

Interesting question! You can follow the same steps but use the selector “header” instead of the page section ID

[@markphethean3831]

@@InsideTheSquare thank you! :)

[@meaganjustus]

Great tutorial as always; thank you! Any recommendations for when you have a website banner that has text overlay and buttons on desktop view but doesn't work for mobile. I see how to easily change the image for mobile but is there a way to change the image on mobile and still have a button overlay on say, the bottom of the image in mobile view?

[@hiphoplittles]

Is there anyway I can have the same image display the same way on mobile how it does on desktop?

[@InsideTheSquare]

Interesting question! It depends on what layout you are going for because the width to height ratio is usually different. If you don't have any content in a page section then theoretically, yes, but you'll have to use a fluid engine section to have control over the mobile height. Hope that info helps!

[@garymichael4095]

does this work for a foreground image - the main image on my site is too big and I want to display a different image on mobile - ive tried the code and can't get it to work

[@InsideTheSquare]

It does! Check out this tutorial: insidethesquare.co/squarespace-tutorials/mobile-only

[@garymichael4095]

@@InsideTheSquare thanks but im a novice I was looking for the whole code or tutorial. thanks anyway

[@nizhang2610]

Thank you for this tutorial, but I do have a question. I used the code with my uploaded image, followed every step, but when I view the mobile site, the designated image only shows up for a split-second and then replaced by the image used for non-mobile site. And this image is the size of the intended one and appears to be floating on top of the full-bleed background image. I hope I'm making sense. Would really appreciate some help.

[@InsideTheSquare]

I’d be happy to help! Feel free to submit a code help request with more info here: insidethesquare.co/code-help

[@nizhang2610]

@@InsideTheSquare Thank you! I submitted a request. Just want to add, I'm trying to apply this to my home page, but somehow it just keep showing the wrong image ;( And I double checked, before I moved the code to advanced under homepage, it was showing the correct image on every other pages just not the homepage.

[@nicholaspatino5895]

Life saving video!! However, i am coming across an issue. When i upload the code it changes the home page but also gets behind my product when i click into the product for more details? any idea why this is happening? Thanks!

[@InsideTheSquare]

Hey Nicholas! Adding code to your site wide CSS file under design > custom css will put your code on every page. But there are two ways to add code to a single page - check out this tutorial for more help: insidethesquare.co/singlepage

[@Pauline-z1f]

Thank you so much for another great tutorial! Just having a little TROUBLESHOOTING: I successfully changed the background video on my homepage to an image for the mobile version. However, upon adding the code, all the font, header, and footer colors changed to a different color. 😞 Any tips to avoid those changes? Thanks in advance :-)

[@InsideTheSquare]

Uhoh - that's not good! 😳 I'm not sure what about this code would change your colors :/ Can you send me a link so I can take a look? support-at-insidethesquare.co

[@michelleaisha4776]

Love this tutorial!! I was able to do this perfect on my home page. Is there a way I can do the same for other pages? How would we label the pages if we were to apply this to another page

[@InsideTheSquare]

You should be able to, you can use a unique block ID to target a specific thing on your site; check out this tutorial for more info: kzbin.info/www/bejne/nmnUl42alqaHmLc

[@Sp4cec0de]

Is there any way to do this with a different image for each page?

[@InsideTheSquare]

Oooh I love this idea! I’ll definitely add this to my tutorial to-do list; stay tuned 😉

[@DevinCope-l9t]

How would I go about doing this same thing but instead of an image I have one video for desktop and one video for mobile?

[@InsideTheSquare]

You can create a custom layout for mobile using the technique in this tutorial: insidethesquare.co/squarespace-tutorials/custom-mobile-layout Hope that info helps and best of luck with your project! :)

[@buildoasis]

Will this code still work if the desktop background is a video being replaced with an image on mobile?

[@InsideTheSquare]

You won’t need a code to do this if your background is a video because you’re uploading a different image for mobile already; Squarespace is built for that 👍🤣

[@corbinpearce7686]

I've copied, pasted, and saved the code onto my site which is using the same base scenario as your situation, along with updating the variables, and literally nothing has happened. It's not just that it didn't quite do what I needed, there's no change at all... I've had CSS work on other parts of my site just fine. Am I missing something?

[@InsideTheSquare]

Squarespace made a big layout change after this tutorial was created! You need to add the code .section-border{background:transparent!important} to your CSS so that new layer is hidden and your custom background image shows up perfectly. You'll find more info in the description for this video.

[@alf3247]

I've done this and now when I open up the website on the phone the picture comes on for a split second then goes back to the same picture as the one on the pc any idea where I've gone wrong?

[@alf3247]

I've now realised that it works on all the pages I didn't want it to work on but just flashes on the Home Screen which is where I want the image.

[@InsideTheSquare]

That doesn’t sound right! I would love to help - send me more info at insidethesquare.co/code-help and I’ll hop into your source code and take a look.

[@pasbusyp]

This worked great, but now on all my other pages in mobile the same image is shown in the 1st section. Is there a way I can make this background show in mobile only on my home page?

[@InsideTheSquare]

Great question Pasquale - and yes! You can install this code on a single page two different ways. This article has more info that can help: insidethesquare.co/squarespace-tutorials/single-page

[@samaiatraforti9060]

From the backend it looks good, the image changes on mobile view but when actually viewed on a phone it seems to stay the same even when clearing the cache.... would this be an internal server error on squarespace's part or something on my end?

[@samaiatraforti9060]

All good, I forgot id injected it into the header previously and had a little run around but got her sorted! Amazing tutorials thanks so much!

[@larrywaters7191]

Shhhh! There is a ghost right behind you!

[@InsideTheSquare]

Haha 👻

[@kirkleitch8416]

Thanks so much for the tutorial! Unfortunately, I'm having an issue I can't seem to figure out. I'm using the "Page Header Code Injection" to get this functionality on a specific page. I want the image swap to happen in the first section so I left both (1)'s as is. But nothing happens. However, if I change the number to any other section on the page, it works perfectly! Any idea what might be causing this? In all the sections where it works, there isn't an existing background image. It's just solid color. Only the first section has a background image. TIA!

[@kirkleitch8416]

I rebuilt the section and it's working now. There was a parallax effect in the section originally and I think that was causing the issue.

[@danadoss7827]

I have added this successfully, but for some reason it also shows in the footer of my site. Any solution?

[@InsideTheSquare]

Hey Dana! Try adding #page to the front of your code to isolate just the page itself.

[@vladtepes03]

Image still applies to all other pages despite following the tutorial to the letter. Wondering if this is a squares space issue or an code issue.

[@InsideTheSquare]

If you install the code using page header code injection for the individual page (kzbin.info/www/bejne/oYmZnIWgeMetq5o) the browser only loads that code with that page because it won't exist anywhere else. If you installed it that way and not site wide, and you are still seeing it on every page, it sounds like there is something wrong with your browser! 🤔

[@vladtepes03]

@@InsideTheSquare Hey just wanted to let you know there was indeed something wrong with my browser. Your code is now working flawlessly.

[@alphesdainteractive1279]

what about wanting to change a video instead of image ?!

[@InsideTheSquare]

I am not quite sure what you are trying to create but I would love to help! Feel free to submit a tutorial request with more info at insidethesquare.co/suggest-tutorial

[@hannahe.s.caldwell6853]

Love your tutorials, thank you for making them! MORE TROUBLESHOOTING: If this code isn't working for you, make sure you have a fallback mobile image uploaded. That is the only way the code will work in my site. I have a video as my header image btw, and that could be part of why it isn't working without the mobile fallback image uploaded.

[@InsideTheSquare]

Thanks for the tip!

[@victoriadearmond9413]

My issue is the cover page, and it specifically says custom css doesn’t apply to cover pages. Bah!! Does anyone know how to accomplish that?

[@InsideTheSquare]

Hey Victoria, feel free to submit a code help request and I'll see what I can do: insidethesquare.co/code-help

[@Betrayedthelaw]

Hello, @media only screen and (max-width: 640px){ .section-background img { opacity:0!important }} this will also remove the header image. how to bypass this?

[@InsideTheSquare]

The header does not have a section background. If your header is transparent, it will be displayed on top of the section background underneath it. If you need a background image for the header of your site, you can add an one by following this tutorial: kzbin.info/www/bejne/pKmzmZariZ2JbdU

[@Betrayedthelaw]

@@InsideTheSquare well thats not what I meant. the images loaded into sections still look bad on mobile. even after applying the code in this video. So I decided to not show section background images on mobile. However using the code you provided it removes all section images. but i want to be able to select the sections I want to affect.

[@InsideTheSquare]

Squarespace just released a brand new feature for page sections in version 7.1 called Section Divider. I created a NEW tutorial where you'll learn how to access these new design options and what your settings are. → kzbin.info/www/bejne/jHbQm6SBlNmdY9k