How to set image height 90 % of whole page height (not viewport)


Tags: jquery,css

Problem :

I have a bootstrap page and in it I'm loading an image which is over the content and it needs to be height: calc(page height - 150 px) how I would achieve something like that? It's a WordPress bootstrap template. Thanks a lot for your help!

Thanks a lot. Sample HTML code:

<div class="container-fluid" id="uvod">
<img src="img/zirafa.png" class="zirafa" />
    <div class="row clearfix uvod silver"><div class="container">
        <div class="col-md-12 column">
            <div class="text-center"><h2>HEADER 2</h2></div>
            <div class="text">Some text goes here.</div>
        </div>
    </div></div>
</div>

CSS:

img.zirafa {
  width: 100px;
  position: absolute;
  left: 20px;
  z-index: 100;
  top: 100px;
  /*height: 2950px;*/
  width: auto;
}

Edit: As the giraffe here (my site) - it should be from the top to the bottom.



Solution :

you may do :

$(window).load(function () {
    sizeImg();
})
$(window).resize(function () {
    sizeImg();
})
var sizeImg = function () {
    var imgH = $(document).height();
    $('img.zirafa').css('height', imgH * 0.9 - 150 + "px");
}

http://codepen.io/anon/pen/embXjR


    CSS Howto..

    CSS, a Fixed Position Div with Dynamic Content - How to Position Another Div Underneath it?

    How to use getElementId on and ID's Element

    How to center images vertically these divs?

    SCSS / Sass: How do i change a mixin to output specific CSS?

    How to set my Django form on the center of the page

    How to get this functionality to work

    How to make an element slide with the viewport as it scrolls?

    how to find a class and apply a style with jquery?

    How to force free CSS resize on input element when its width is specified?

    How to avoid text go below the icon with css?

    How to use jquery function on numbers separated by .(dot) or ,(comma) as thousands separator

    How to set display none on tag using css?

    how to get both icon and heading in same line in css

    How can I simply add a css file to change the background color for my shiny app

    How to make pixel perfect font in css?

    How Can I Use CSS :after to Add a Glyphicon Element to an Input

    How to hover over a div to change just a part of its background?

    how to use variables when setting CSS properties in Jquery?

    How to host html files like css and javascript files

    How to align an image inside a DIV without adding new classes using CSS

    How large can CSS values be?

    how to bring two blocks closer

    If a child has a certain specific value, how to check and make “true” so that hover of the parent yields a result?

    How to change nav text color when scrolled over other div anchors in the page

    How can I make jQuery's draggable function expand the container?

    How do I display other info on page using only CSS and HTML

    How to apply a CSS class to another element when an object is hovered?

    How do I get the background image to not repeat and take up the entire section?

    How Do I Make a “Trickless”, Cross-Platform CSS-Based Same Column Height?

    How can I position some divs inside an unordered list so they line up with the root element of the list?