Fit div height to background-image height (with parallax effect)

Question

I have detected a problem with 100% width parallax background-image. I've to use fixed value of div height, because it's empty.

Problem is: empty space under background image when viewport is tight. Ask: how to create a responsive div height equals to background-image height.

My current searching and trying:

found: How to get div height to auto-adjust to background size?
trying two most popular methods with no effect,
prepare codepen: https://codepen.io/SeboFE/pen/xBVjzQ

// tried, but didn't work

// <div class="parallax">
//   <img src="https://images.pexels.com/photos/574205/pexels-photo-574205.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260">
// </div>

// img{
//   visibility: hidden;
//   max-width: 100%;
// }

//second method didn;t work too
// .parallax{
//   background-image: url("https://images.pexels.com/photos/574205/pexels-photo-574205.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260");
//   background-attachment: fixed;
//   background-repeat: no-repeat;
//   background-size: 100% auto;
//   padding-top: 60%;
//   height: 0;
// }

html, body{
  width: 100%;
  margin: 0;
  padding: 0;
}

.empty-space-20{
  height: 20vh;
  background-color: lime;
}



.parallax{
  background-image: url("https://images.pexels.com/photos/574205/pexels-photo-574205.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260");
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: 100% auto;
  height: 40vh;
}



.empty-space{
  height: 1000px;
  background-color: coral;
}

<div class="empty-space-20">some empty space</div>
<div class="parallax"></div>

<div class="empty-space">some empty space</div>

Temani Afif · Accepted Answer · 2019-03-02T19:48:03.483

2

Use vw instead of vh to have a better responsive and avoid the space under the image. The image is chaging in height keeping it's ratio so you do the same for the div. You can also adjust the position of the image to strat inside that div.

html, body{
  width: 100%;
  margin: 0;
  padding: 0;
}

.empty-space-20{
  height: 20vh;
  background-color: lime;
}



.parallax{
  background-image: url("https://images.pexels.com/photos/574205/pexels-photo-574205.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260");
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: 0 20vh;
  height: 50vw;
}



.empty-space{
  height: 1000px;
  background-color: coral;
}

<div class="empty-space-20">some empty space</div>
<div class="parallax"></div>

<div class="empty-space">some empty space</div>

If you don't want any space on scroll decrease the height like below and keep the default position for the background:

html, body{
  width: 100%;
  margin: 0;
  padding: 0;
}

.empty-space-20{
  height: 20vh;
  background-color: lime;
}



.parallax{
  background-image: url("https://images.pexels.com/photos/574205/pexels-photo-574205.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260");
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: 100% auto;
  height: calc(50vw - 20vh);
}



.empty-space{
  height: 1000px;
  background-color: coral;
}

<div class="empty-space-20">some empty space</div>
<div class="parallax"></div>

<div class="empty-space">some empty space</div>

edited Mar 02 '19 at 19:48

answered Mar 02 '19 at 19:18

Temani Afif

245,468
26
309
415

I use Your advice and see empty space above background-image instead of bottom? – 3D_fun Mar 02 '19 at 19:43
@3D_fun when you scroll yes, because it's fixed ... you don't want any space in any situation? or only initially (like I understood)? – Temani Afif Mar 02 '19 at 19:44
I would have div whole filled by background-image. This rule should work even I change viewport. EDIT: I would not to use media queries. – 3D_fun Mar 02 '19 at 19:46
@3D_fun *change the viewport* you mean scrolling? or reducing window size? – Temani Afif Mar 02 '19 at 19:46
Yes, reducing size – 3D_fun Mar 02 '19 at 19:47
@3D_fun you see spaces if you run my snippet? or it's on your code? – Temani Afif Mar 02 '19 at 19:49
Now, after Your changes it is look better, because there are no empty spaces arround image, but can You tell me, how did You choose values 50vw and 20vh to calc? – 3D_fun Mar 02 '19 at 19:55
@3D_fun the 20vh is the size of the upper div ... the 50vw was based on the image it self. The height of the image is around 56% its width and you made the image to be 100% which is almost 100vw thus the height should be around 56vw ... I choose a lower value because when you have scroll 100vw is bigger than 100% because it consider the scroll width, so with 50vw you will be sure it's fine. – Temani Afif Mar 02 '19 at 19:59
So 20vh it's distance from top to image, 50vw = ~ (imageHeight / imageWidth * 100%), but what should I do if I would gain final width of div.parallax to be 40vh? – 3D_fun Mar 06 '19 at 17:31
@3D_fun yes that's it .. but what you mean by *gain final width to be 40vh* ? – Temani Afif Mar 06 '19 at 19:48
I would have layout. Navbar, parallax image (40% of browser height = 40vh) and next content below (doesn't matter) – 3D_fun Mar 06 '19 at 20:50
@3D_fun and we get back to the main issue .. if the height is fixed it would be difficult as the image height is not fixed and we get the bottom space... the only way to do is to make the image big enough to be sure it never be below 40vh, is this a solution for you? if yes I can try to give you a code – Temani Afif Mar 06 '19 at 20:58
It isn't necessary, but it can be interesting to see Your idea. Do You see possibility to form rules for lower / upper limit of height (example: height should be between 40-45% of vh)? – 3D_fun Mar 07 '19 at 18:19

Fit div height to background-image height (with parallax effect)

1 Answers1