Search code examples
cssmobilebootstrap-4background-image

Bootstrap Mobile background image

I have a background image set. When I look on a mobile device the background image is different sizes on different pages even though they are all linked to the same stylesheet with this code

Site is 'treyscode.com' you can go to the different pages and see the size difference. Page is still not finished so don't give me too hard of a time :)

'''

body {
  background: url(../image/blackhole.jpg);
  background-repeat: no-repeat;
      background-position: center;
      background-attachment: fixed;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
      height:100%;
      width:100%;
}

'''

Why would different pages show the background image as a different size?

Solution

  • Actually it depends upon your content of the webpage.As you have set the background-repeat property to no-repeat so it makes you think that it's of different size. In actual the image is constantly sticked and it's of same size on every page.

    If you'll remove the above background-repeat property then you can see the difference which i'm talking about.