垂直响应的背景图像

Question

I have a full-page background image with a thin margin (10px) that I want to maintain around the image on every side regardless of browser size. So far, every side is fine except the bottom. Is there a way I can have a vertically responsive background image using only css? I prefer to not use Javascript but if that's the only solution, I'm open.

.background-image {
    display: inline-block; 
    height: 100%;
    width: 98%;
    margin: 1%;
    background: url('/wp-content/themes/woodsy/images/background-walnut-test.jpg') no-repeat center center fixed;
    background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    -webkit-background-size: cover; 
}

Answer 1

If you want to have the same 1% margin as the width, you just need to change the height to 98% (as the width is).

If you want to have exactly a 10px margin, specify the margin, the use calc() to set the width and height:

margin: 10px;
height: calc(100% - 20px);
width: calc(100% - 20px);

See it working here: http://jsfiddle.net/snvhbee7/

Answer 2

I'm not sure I understand the question, but if I do, I think I know exactly what you're looking for.

Instead of using:

    height: 100%;

try:

    height: 100vh;

'vh' stands for 'viewport height'. It should set the height of your image to the full height of the browser window, on the fly.

Hope that helps.