Question

I use such css for setting responsive background. When I see it on mobile, the background is zoomed in more and more if there is a lot of content appears on page. What is the proper way to avoid zooming of background? thanx

body {
    background: url('someimage.jpg') no-repeat center center fixed;

    background-size: cover;

    }

Answer 1

A viewport meta tag like this might help (at the top of your html):

<meta name="viewport" content="width=device-width, initial-scale=1">

This will ensure that on a mobile screen, the content will not be displayed as on a large screen, and the width of the body element will only be as wide as the screen.

Answer 2

Its due to cover, cover will make sure the whole container gets covered with the image. You could try to use contain

Answer 3

You can try to define the body height as 100%, this should avoid vertical stretching of the background image:

body {
  height: 100%;
  background: url('someimage.jpg') no-repeat center center fixed;
  background-size: cover;
}

And for that body height to work , you should also add this to your CSS:

html {
  height: 100%;
}

With these setting, the bodys overflow is the default auto, which will cause a scroll bar to appear as soon as the contents exceed the 100% height.

css responsive background gets zoomed when more content appear

3 个答案: