CODEWITHSUNDEEP
htmlcss
Adrian
Adrian

Reputation: 273

Set the div height same as fluid image height if (image position: fixed)

I am trying to create responsive behavior with the fixed image on top and would like to achieve that the following content snapped to the bottom of the div that contains the image, but the image with position: fixed gives no height to the div, can you please point me what is wrong and if there is another way to achieve that?

.slider {
  height: auto;
  width: 100%;
}
.image {
  width: 100%;
  position: fixed;
  z-index: -1;
  top: 0;
}
.content {
  height: 1100px;
  background-color: black;
  width: 100%;
  z-index: 100;
  margin-top: 350px;
  position: relative;
}
<div class='slider'>
  <img class='image' src='http://s2.postimg.org/vmnzo6e0p/top.jpg'>
</div>

<div class='content'>
</div>

Diagram of expierience that I would like to achieve. enter image description here

Upvotes: 0

Views: 71

Answers (1)

digglemister
digglemister

Reputation: 1487

Maybe you're looking for something like this using JQuery: https://jsfiddle.net/9hmyr40w/

CSS:

body{
    margin: 0px;
}

.slider {
    height: auto;
    width: 100%;
}

.image {
    width: 100%;
    position: fixed;
    z-index: -1;
    top: 0;
}

.content {
    height: 1100px;
    background-color: black;
    width: 100%;
    z-index: 100;
    position: relative;
}

JQuery:

$(window).on("load resize", function() {
    var imageBottom = $(".image").height() - 15 
    $(".content").css("top",imageBottom)
})

Upvotes: 1

Related Questions