How to make background-image non-stretchable? - css

Question

In my project I've set background image with the following attributes:
body {
background-image: url("/");
background-size: cover;
background-repeat: no-repeat;
}
But when there are lots of elements on some page, this image stretching and enlarging to the bottom and, therefore, becomes ugly. How to do it non-stretchable? So that I can scroll down and that image would be constant.
Here's the example of the image stretching on CodePen. Below is the snippet:
body {
background-image: url("http://www.planwallpaper.com/static/images/canberra_hero_image.jpg");
background-size: cover;
background-repeat: no-repeat;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class=col-md-4>
<div class="jumbotron">
Some element
</div>
</div>
<div class=col-md-4>
<div class="jumbotron">
Some element
</div>
</div>
<div class=col-md-4>
<div class="jumbotron">
Some element
</div>
</div>
<div class=col-md-4>
<div class="jumbotron">
Some element
</div>
</div>
<div class=col-md-4>
<div class="jumbotron">
Some element
</div>
</div>
<div class=col-md-4>
<div class="jumbotron">
Some element
</div>
</div>
<div class=col-md-4>
<div class="jumbotron">
Some element
</div>
</div>
<div class=col-md-4>
<div class="jumbotron">
Some element
</div>
</div>
<div class=col-md-4>
<div class="jumbotron">
Some element
</div>
</div>
<div class=col-md-4>
<div class="jumbotron">
Some element
</div>
</div>
<div class=col-md-4>
<div class="jumbotron">
Some element
</div>
</div>
<div class=col-md-4>
<div class="jumbotron">
Some element
</div>
</div>
<div class=col-md-4>
<div class="jumbotron">
Some element
</div>
</div>
<div class=col-md-4>
<div class="jumbotron">
Some element
</div>
</div>
<div class=col-md-4>
<div class="jumbotron">
Some element
</div>
</div>
<div class=col-md-4>
<div class="jumbotron">
Some element
</div>
</div>
<div class=col-md-4>
<div class="jumbotron">
Some element
</div>
</div>
<div class=col-md-4>
<div class="jumbotron">
Some element
</div>
</div>
<div class=col-md-4>
<div class="jumbotron">
Some element
</div>
</div>
</div>
</div>

Answer 1

If you do not want the background image to stretch then you should not set background-size: cover on the element. Setting the background size to cover would mean that the background image would be scaled (stretched) to fit the size of the container element.
Here is what MDN says about background-size: cover:
Scales the image as large as possible and maintains image aspect ratio (image doesn't get squished). The image "covers" the entire width or height of the container.
If you want the background image to remain constant even when scrolling down the page, you should add background-attachment: fixed to the element. This would keep the image in its place.
The background-position: 50% 50% in the below snippet is an optional setting which is just used to keep the background image positioned at the center-mid. This can be avoided if such a positioning is not required. By default the image would get positioned at top-left.
body {
background-image: url("http://lorempixel.com/850/420/nature/1");
background-position: 50% 50%;
background-attachment: fixed;
background-size: cover;
background-repeat: no-repeat;
}
div{
height: 100px;
}
<div>Lorem Ipsum Dolor Sit Amet......</div>
<div>Lorem Ipsum Dolor Sit Amet......</div>
<div>Lorem Ipsum Dolor Sit Amet......</div>
<div>Lorem Ipsum Dolor Sit Amet......</div>
<div>Lorem Ipsum Dolor Sit Amet......</div>
<div>Lorem Ipsum Dolor Sit Amet......</div>
<div>Lorem Ipsum Dolor Sit Amet......</div>
<div>Lorem Ipsum Dolor Sit Amet......</div>
Note that stretching happens with background-size: cover only when the background-attachment: fixed setting is not applied (meaning, the image is not constant and gets stretched to fit container's full height/width) or when the image is smaller than the container. When it is larger than the container and background-attachment: fixed setting is applied, the image does not get stretched.
Another thing to note with background-size: cover is that when the image and the container have different sizes, the image is clipped at the sides. If it should be shrunk instead of being clipped then background-size: 100% 100% could also be used.
body {
background-image: url("http://lorempixel.com/850/420/nature/1");
background-position: 50% 50%;
background-attachment: fixed;
background-size: 100% 100%;
background-repeat: no-repeat;
}
div{
height: 100px;
}
<div>Lorem Ipsum Dolor Sit Amet......</div>
<div>Lorem Ipsum Dolor Sit Amet......</div>
<div>Lorem Ipsum Dolor Sit Amet......</div>
<div>Lorem Ipsum Dolor Sit Amet......</div>
<div>Lorem Ipsum Dolor Sit Amet......</div>
<div>Lorem Ipsum Dolor Sit Amet......</div>
<div>Lorem Ipsum Dolor Sit Amet......</div>
<div>Lorem Ipsum Dolor Sit Amet......</div>