Clever Geek Handbook

Mobile fixed css image background, image scrolling

I'm making a website for my 23-year-old girlfriends and she will mainly look on mobile devices. The background image is fixed (no problem on desktop) but on mobile the image scrolls slightly at the bottom but adjusts after scrolling. (Attached video: https://youtu.be/wKnxYXEy0mg )

CSS Below:

body {
   background-image:url(Gold2.jpg);
   display: block;
   background-color: gold;
   background-repeat: no-repeat;
   background-size: cover;
   background-attachment: fixed;
   background-position: center;
   min-height: 500px;
}
+3


source to share


2 answers


It's not moving the background, it's Chrome's address bar disappears. It's ok, try the site in a different browser.



+1


source


Have you already tried to disable this behavior using jQuery? jQuery makes it easy to add and remove classes, and add css to them. You can create an if statement that will manually add this background css rule to the section. Another option I would like to consider is to add new classes for whatever you need in this case, and provide all z-indexes above 1 (just to make sure everything shows up in the mobile chrome app). These are only guesses that I would understand in your situation, although I did not know this behavior up to this point. Hope I helped you with your problem ...: ^)



0


source






More articles:


All Articles