Search code examples
htmlbackground-imagecss

CSS: Responsive background image height

I'm using this CSS:

.wrap {
    max-width:1400px;
    min-width:768px;
    width:100%;
    background-repeat: no-repeat scroll;
    background-position: center top;
    position: relative;
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
.image {
    width: 100%;
    height: 600px;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

To center an image and scale it based on window size, stopping the scaling at 768px. I can't display the bottom part of the image when the window is at a larger size (it works fine when the window is minimized). When I change the height of the .image class to more than 600px, it breaks the image scaling...

Here's a demo of the problem: http://jrbaldwin.com/css_issue/

Solution

  • I think it's not scaling because the height is staying fixed. For example, set the .image height to 1000px. It has to enlarge the image to cover 1000px so it fills the entire 1000px height at all time, no matter what width the image is.

    Possibly try:

    background-size: 100%; background-repeat: no-repeat;