How do you prevent a background image from being zoomed in when it displays as the background for your page?

Question

I would like for the background image I'm using for my body tag to cover the entire background without a being zoomed in on one particular part of the image. In other words, I want the image to display as the background as the full picture, not cut off anywhere. Here is the CSS for my current body tag with the image:

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

What do you mean by "not cut off anywhere"? Here is a [fiddle](https://jsfiddle.net/ymspt3fb/) of the css you provided, and the background image is not cut off, though it resizes based on width size. — assefamaru, Mar 12 '16 at 04:25
My image covers the entire page as expected, but it is zoomed in more toward the top of the picture and doesn't show the full picture basically. The bottom is cut off. I would like the background to show the entire picture. Do you know how to make it fit the background exactly so that 100% of the image is shown? — Mjuice, Mar 12 '16 at 04:27
`background-size: 100% 100%;` will force your background image to fit its container element, but it may stretch or distort in unintended ways. — Connor, Mar 12 '16 at 05:03

score 0 · Answer 1 · answered Mar 12 '16 at 05:16

0

To get image cover background, you can do the following:

body {
    background: url(weather-background.jpeg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

Here is a working jsbin example with the following output. You can go through css tricks - perfect full page background image for more examples and methods.

answered Mar 12 '16 at 05:16

assefamaru

2,751
2
10
14

In order to use webkit, do I need to install anything via npm or require anything via script tag? – Mjuice Mar 12 '16 at 10:09
No you don't. [Webkit](https://www.wikiwand.com/en/WebKit) is simply a rendering engine that draws the html/css of a webpage in Chrome and Safari. And the css-prefix becomes `-webkit`. Similarly we have `-moz` for firefox, `-o` for opera, and `-msie` for IE, with each browser having their own rendering engine. So when you include all variations (ie. -webkit, -moz, -o etc), you allow the specified property to work across browsers better. Checkout [what is webkit, and how is it related to css](https://stackoverflow.com/questions/3468154/what-is-webkit-and-how-is-it-related-to-css) – assefamaru Mar 12 '16 at 18:11

score 0 · Answer 2 · answered Mar 12 '16 at 08:03

I'm currently working on another website and the client has requested parallax to be used. Here are some CSS properties that I believe could be used to resolve your problem:

body {
    background-image: url('wherever');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
{

Try that and see if it works.

score 0 · Answer 3 · answered Mar 12 '16 at 10:19

So this was what worked for me:

body {
    background-image: url("weather-background.jpeg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

and then I gave my body tag a class of "contentContainer" and added this jQuery method:

$(".contentContainer").css("min-height", $(window).height());

How do you prevent a background image from being zoomed in when it displays as the background for your page?

3 Answers3