CSS - Show Entire Image as Background Without Cropping

Question

I'm trying to setup a div with a background image with some text on top of it. The background image needs to stretch the entire width of the viewport, which I've been able to do successfully. This is my CSS:

.intro-header {
  padding-top: 50px; 
  padding-bottom: 50px;
  color: #fff;
  background: url(http://) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

The problem I'm having is that it isn't showing the full height of the image. The image is being cropped at the top and bottom. I want the image to show it's full height and the user needs to be able to scroll down to see more content below the image.

Is there a way I can show the full image without cutting the top and bottom off?

Thanks!

Solution 1

Remove the fixed and instead of cover use contain. If you want a specific size though I would define a height in my css.

Solution 2

You can use background-size: auto 100%;

I updated an example in fiddle to see how its looks.

http://jsfiddle.net/4ozmn00t/2/

Solution 3

.intro-header {
    padding-top: 50px; 
    padding-bottom: 50px;
    color: #fff;
    background: url(http://);
    background-size: 100% 100%;
}

setting the width and height of background-size to 100% will fill the div

Comments

[Jeff Axelrod]

That doesn't preserve the aspect ratio.