CODEWITHSUNDEEP
htmlbackground-imagecss
alyx
alyx

Reputation: 2733

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/

Upvotes: 0

Views: 38934

Answers (4)

Slawa Eremin
Slawa Eremin

Reputation: 5415

Try this styles:

.image{
  width: 100%;
  height: 600px;
  max-height: 1000px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  max-height: 1000px;
}

The main idea is to use "contain" property
More information: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Scaling_background_images

Upvotes: 1

jtlowe
jtlowe

Reputation: 857

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;

Upvotes: 3

Mr. Mayers
Mr. Mayers

Reputation: 356

Use background-size: contain instead of cover.

Upvotes: 1

Lasse
Lasse

Reputation: 1656

Building on @jtlowe's answer, couldn't you achieve the right effect by using background-size: contain instead?

Since you're already firmly in the CSS3 domain, you can optionally create a media query that uses cover in smaller size windows.

Upvotes: 1

Related Questions