0

I'm trying to get my background image to zoom in as I resize the window to a smaller screen so that it takes up the entire screen(height and width). When I started out, I would resize the window and the background image would get smaller and repeat. So I found this CSS that stopped the image from repeating and makes sure it covers the width of the screen(but not necessarily the height).

    .body-index {
       background-image: url("https:......jpeg");
       background-repeat: no-repeat;
       background-size: cover;
    }

Right now when I resize the window the background image resizes and doesn't repeat. But because the image continues to get smaller there is white space below the background image on mobile platforms. How can I have the image resize in such a way as to not create the white space on mobile platforms?

Braden Brown
  • 3,111
  • 1
  • 20
  • 18
  • 1
    Possible duplicate of [CSS background image to fit width, height should auto-scale in proportion](https://stackoverflow.com/questions/9262861/css-background-image-to-fit-width-height-should-auto-scale-in-proportion) – S4NDM4N Aug 25 '17 at 03:49

2 Answers2

1

You have to use it like this.

.body-index {
    background: url("../images/bg.jpg") no-repeat center center fixed; // All the background properties are set here.

//BG property is set for other browsers
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
S4NDM4N
  • 904
  • 2
  • 11
  • 26
0

With CSS:

img {
    max-width: 100%;
    height: auto;
}

With Help of JS:

window.onresize = function(){
    var img = document.getElementById('imageID');
    img.style.width = "100%";
};
thomaux
  • 19,133
  • 10
  • 76
  • 103
patm
  • 110
  • 1
  • 9