-1

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?

Giuseppedes
  • 129
  • 9

2 Answers2

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, e.g.:

#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).

tao
  • 82,996
  • 16
  • 114
  • 150
0

Try setting #slide1 height property to 100% instead of using auto.

Dejan L.
  • 91
  • 1
  • 2
  • Your solution is as effective as praying. – tao May 07 '16 at 19:14
  • Your comment Andrei is juvenile, insulting and inappropriate. – Dejan L. May 07 '16 at 22:11
  • Your answer passes the problem to the containing block which might or might not have sufficient set/resulting `height` in order for `#slide1` to display more of its background image. Also, you are not explaining when and why this would work, rendering the solution inappropriate and my comparison rather appropriate. I didn't mean it as an insult, I was hoping you'd see the resemblance and improve the quality of your future answers. – tao May 08 '16 at 02:38
  • Doesn't work. with 100% its height is equal to the eight of the browser window and not equal to the image. – Giuseppedes May 08 '16 at 09:40