Jump to content

Fixed custom background for mobile

Recommended Posts

Site URL: https://www.rsfxx.com

I applied some custom CSS to the WELLS template in order to add a custom background , on the desktop the background is fixed like we want it to be, on the mobile preview editor on the desktop its also fixed but on the iPhone/iPad It scrolls. Does anyone know how to get it fixed on mobile as well? Thanks 

 

Current code being used

body {background: url(https://static1.squarespace.com/static/5b5d8216da02bc91831c95ab/t/5c3d904121c67cb9c5e0f5cb/1547538498155/Site+Background1.jpg) repeat center center fixed; -webkit-background-size: auto; -moz-background-size: auto; -o-background-size: auto; background-size: auto;}

 @media only screen and (max-width: 800px) {
    #mobileNav a, { 
    font-size: 20px !important;
        color: #ffffff !important;
 line-height: 1em !important;
      text-align: left;
      margin-left: 15px;
  }
  #mobileNav {
  background-color: #000000;
      }
   }
#mobileMenuLink a {
    color: white !important;
font-size: 18px !important;}

 

Link to comment
  • 7 months later...
  • Replies 3
  • Views 349
  • Created
  • Last Reply

https://paddlefish-saffron-nn8z.squarespace.com/

pass:  123456

 

on the request quote page.  I will have a background image on all pages.  I want them them to stay fixed while the content scrolls over it the background.  IF it cannot be done with just with Custom CSS, I'm open to using JavaScript.

I've tried the code below, works fine on desktop...but on mobile the content does not scroll OVER the background the background image scrolls with the text.

body#collection-blockname .main-content {
    background-image: url(URL HERE);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100vw auto;
    background-position: center center;
}


@media only screen and (max-width: 767px) {
body#collection-blockname .main-content {
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 200vw auto;
    background-position: center top;}
}

 

Thanks!

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.