0

Using @media with CSS to fix the background image. Logic tells me this should work, but I'm not getting any changed results after implementing this. I've included the body code I'm working to overwrite as well.

Mobile:

@media (min-width: 768px) {
   body {
     background-position: center;
     background-attachment: fixed;
   }
}

Desktop:

body {
   height: 100%;
   background-image: url('../design/image.jpg');
   background-repeat: no-repeat;
   background-color: #333;
   background-position: center;
   background-size: cover;
}
phamousphil
  • 254
  • 4
  • 15

1 Answers1

2

background-attachment: fixed; does not work on mobile webkit. There is a workaround, you can place the image inline in the html, set the position fixed and z-index below the content.

this is related Using background-attachment:fixed in safari on the ipad

Community
  • 1
  • 1
Kunsang
  • 402
  • 2
  • 5