show full image (height) with background-size: cover

Question

I'm writing an html page with parallax using stellar.js. In CSS I use:

html, body {height: 100%;}

#slide1 {
height: auto;
background-image:url('../images/1.jpg');
background-color:#fff;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed; }

But the image is cut and the bottom of the image is not visible.

Is it possible to set the height of the section (#slide1) to show all the image?

Answer 1

Using background-size:cover; will always crop your background image either vertically or horizontally, except when the element has the exact same h/w ratio as the image. The key is to choose and position the background in such manner that it still looks good when it is cut.

Most likely, you want to give your element a min-height , eg:

#slide1 {
  min-height: 600px;
}

Keep in mind the most popular desktop ratio is 16:9 and most mobile devices are held vertically. If necessary, use @media queries for different device/viewport widths.

If you don't want your slide to have a larger height than the viewport height (deviceScreen|browser height), add max-height: 100vh!important; to the above rule (useful on mobile devices).

Answer 2

尝试将 #slide1 height 属性设置为 100% 而不是使用 auto。