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

    How to convert an image for a website menu button into CSS

    How to create gradient background with CSS in Firefox < 3.6?

    How can I make it so that my logo on the top left of the page lines up with the text underneath it?

    How div automatically adjust their size and positions the element inside it

    How to get align=“center” effect in CSS and be XHTML compliant and have it work on most browsers

    How can I have a table with a set height but auto height cells

    Attempting to show logo using 'content' from CSS

    How to create CSS/JavaScript circles grid

    How to apply table css to this structure?

    How to create animated border on hover

    How to make a CSS horizontal navigation menu?

    How can I prevent the seconds portion from displaying on the HTML5 time input element?

    How to make no borders in a td rowspan rows

    How to stretch text in CSS like microsoft word?

    How to keep div height fixed during changing its content?

    How to activate jQuery function with img instead of button?

    How to reduce font weight in Firefox on Mac with CSS?

    How to include library files (css/js) in angular-fullstack based app

    JS/JQuery: How to switch class several times in a loop way?

    How to position a div to be visible but not count towards document width

    PHP+CSS Obfuscation - PHP ord THEN PHP strrev + CSS reverse text, how to get the special chars validated backwards?

    How would I get my horizontal navigation bar to span the full width?

    How to add php to wordpress form

    How to create a dynamic-width arrow in CSS?

    How to create a header that changes as you scroll down the page? [duplicate]

    How to apply css style for dynamic tr with td and input tag?

    How can a CSS id style be accessed in jquery?

    CSS: How to eliminate border for a particular row/column in the table

    How to format an HTML table using CSS for printing?

    how to read the following css class