CODEWITHSUNDEEP
htmlcssresponsive-design
Wrumble
Wrumble

Reputation: 231

Background repeat on y-axis when viewed in mobile

I can't get my background image to repeat on the y-axis when it is viewed on a mobile device. currently when on desktop the page can't scroll and the background image fills the screen. but if you move to tablet or mobile you need to scroll and the image is not repeating. My current code isn't much:

  body {
    background-image: url("../assets/BG.png");
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-repeat: repeat-y;
    background-position: center center;
    margin-top: 0;
    position: absolute;
    height: 100%;
    width:100%;
    margin: 0;
  }

Any help would be great.

Gif of issue: https://i.sstatic.net/PaWQI.jpg

Upvotes: 1

Views: 314

Answers (1)

Johannes
Johannes

Reputation: 67798

erase background-size: cover; from that rule - this will always fill the full body element, also the part that appears when scrolling. Add background-size: 100% auto; instead and change the position to background-position: left top to make sure the image covers the complete width, starting from the upper left edge.

(BTW, position: absolute; for the body element is rather strange)

Here's a snippet that demonstrates it with a placeholder image:

 body {
    background-image: url("http://lorempixel.com/600/100/food");
    background-size: 100% auto;
    background-repeat: repeat-y;
    background-position: left top;
    margin-top: 0;
    position: absolute;
    height: 100%;
    width:100%;
    margin: 0;
  }

Upvotes: 1

Related Questions