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

Fixed custom background for mobile


Gadget

Question

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 post
  • Answers 3
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

3 answers to this question

Recommended Posts

  • 0

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!

Edited by MJakaJaX
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...