Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

CSS to change mobile site-wide background (forte template)


Hello everyone,

I chose the forte template as it allows me to have one site-wide background but on mobile view the focal point that is chosen by Squarespace looks really crappy.

Is there a CSS code that allows me to chose a different focal point OR a different background image for mobile? I know it can be done with banners and cover pages on other templates, but I'd rather keep the site with forte.


Edited by jodaro
Initial Revision

Share this post

Link to post

5 answers to this question

Recommended Posts

  • 0

@jodaro Add to Home > Design > Custom CSS. REmember replacing image url.

/* Background Image on only mobile */
@media screen and (max-width:640px) {
body:not(.collection-type-index):not(.collection-type-gallery) {
   background-repeat: no-repeat;
   background-image: url(https://static1.squarespace.com/static/57f9478…/t/5d35ee7…/1563815567545/TMF-1132-2.jpg) !important;
   background-position: center center;
   background-size: cover;
   background-attachment: scroll;

You can send your question to my email to get faster answer. I provide free priority support in this crazy time. 

How to Setup Password & Share URL - Free Templates - Free Code - CSS ID List

Share this post

Link to post
  • 0

Thanks for the tip Tuanphan!!! This worked, we ran into complications hosting the photo that we wanted to display. In the meantime, another friend offered a simpler solution: restricting the pixel height of the wide-angle photo in mobile. with this limitation, Squarespace effectively cropped the image.

Share this post

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...