1

I'm trying to add a fixed background image to my Squarespace site using the York template. Site can be viewed here (www.newinkmedia.co).

Out of the box, the York template does not support fixed background images so I'm going the custom CSS route. I would like the background image to be centered, contained, and fixed when the user scrolls. Everything seems to be fine on desktop but running into some issues on mobile where the image is enlarged and not fixed.

Screenshots and Custom CSS below:

Desktop Screenshot

Mobile Screenshot #1

Mobile Screenshot #2

.overflow-wrapper {
    -webkit-transition: background-color 100ms linear;
    -moz-transition: background-color 100ms linear;
    -ms-transition: background-color 100ms linear;
    -o-transition: background-color 100ms linear;
    transition: background-color 100ms linear;
    overflow-x: hidden;
    overflow-y: auto;
    background-color: #ffffff;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center top;
    background-image: url("https://static1.squarespace.com/static/5ac6c7bd5417fc86faa1ce9d/t/5acd6b972b6a28a577ff7603/1523411863575/newink_concept_v2ai-09.jpg");
}

Let me know what you think. Greatly appreciate the help.

Andrew Quella
  • 11
  • 3
  • Chrome looks fine and fixed background – Gerardo BLANCO May 24 '18 at 19:09
  • Hi Gerardo - Appreciate the feedback. What device were you using? I checked on chrome/safari via iPhone 7 and 8 with no luck i.e., background image stays at the center and top, not fixed like desktop. Can anybody else confirm? Thanks much. – Andrew Quella May 24 '18 at 21:18

1 Answers1

0

A developer friend of mine pointed me to the following solution. Pasted my revised CSS below to contain & center. Seems to be working fine on mobile Chrome and Safari via iPhone 7.

.overflow-wrapper {
    -webkit-transition: background-color 100ms linear;
    -moz-transition: background-color 100ms linear;
    -ms-transition: background-color 100ms linear;
    -o-transition: background-color 100ms linear;
    transition: background-color 100ms linear;
    overflow-x: hidden;
    overflow-y: auto;
}

body:before {
  content: "";
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  background: url(https://static1.squarespace.com/static/5ac6c7bd5417fc86faa1ce9d/t/5acd6b972b6a28a577ff7603/1523411863575/newink_concept_v2ai-09.jpg) no-repeat center;
  -webkit-background-size: contain;
  -moz-background-size: contain;
  -o-background-size: contain;
  background-size: contain;
}
Andrew Quella
  • 11
  • 3