CODEWITHSUNDEEP
htmlcss
phamousphil
phamousphil

Reputation: 254

Fixed Background Image for Mobile with CSS

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;
}

Upvotes: 0

Views: 5669

Answers (1)

Kunsang
Kunsang

Reputation: 402

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

Upvotes: 2

Related Questions