为什么我的背景图片放大？

Question

I have some toggling journal entries and everything works okay except my background picture zooms in or out depending on which entry I am on. It seems that it zooms in more on the longer entries and zooms out on the shorter ones. The background is under the body tag in my CSS.

Here's my background that's having problems.

body {
background-image: url("http://housedivided.dickinson.edu/grandreview/wp-content/uploads/2010/02/HD_4USCinfantryDetail.preview.jpg");
background-size: cover;

}

Here's my full code: http://jsfiddle.net/michaelpri/urz1sLa8/2/

Any help is greatly appreciated.

Answer 1

Try using contain instead of cover .

When you click, the page height changes, and the background has to cover it all, so it zooms in.

It's just how the background type acts.

Answer 2

Try to use background-size: 100% 100%; , it will stretch the background to the screen size

Answer 3

It zooms because the body size changes when you display these paragraphs under the menus. If you make paragraphs the same size then it will probably stop zooming. Or if you make them independent on the body. Perhaps position: absolute will help.