Turn Background image with percentage height into pixels height on window resize

Question

I have a vertical image that I want to be 100% height of its div container whenever a page is loaded. This works great but when I open the inspector or when the browser is resized the image naturally proportionally shrinks.

CSS:

body {width: 100%; height: 100%};
.container {width: 50%; height: 100%; position: relative};

.bkg-image {
    background: url("../img/image.jpg");
    background-position: right top; 
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    height: 100%;
    min-height: 500px;
    width: 100%;
    left: 0px;
    top: 0px;
}

HTML

<body>
<div class="container">
</div>
<div class="container">
    <div class="bkg-image"></div>
</div>
</body>

The first thing I want I could accomplish easily via jQuery, that is, to make the image having pixels instead of percentage when the page is ready. Css method gets the height's computed size and sets the 'new' height in pixels:

jQuery( document ).ready(function() {
   var heightPx = jQuery('.bkg-image').css("height");
   jQuery('.bkg-image').css("height", heightPx);
});

This does a very nice job but now let's say a user has the window minimized or not completely maximized and loads the page. After the load is done if the user maximizes the browser window, now that the image's height is converted to pixels it will have a 'fixed' height and of course will not be relative to its div container. So, what I ask you to help is:

Whatever the browser window size do the same behaviour I could accomplish BUT:

if the browser window is resized to a bigger size convert the height to 100% again and after the resize is done convert it to pixels again.
If the browser window is resized to a smaller size don't do nothing (I mean, stick with the jQuery already provided).

Is it possible?

If you are already setting the height to percentage then why do you need to convert it into pixels percentage will handle the window resize auomatically. — Manish, Jan 10 '17 at 09:44
Check the below link. it may useful to your question.. [Example](http://stackoverflow.com/questions/9262861/css-background-image-to-fit-width-height-should-auto-scale-in-proportion) — Visveswaran, Jan 10 '17 at 09:44
@Manish thank you:) the problem is that I don't want the image with percentage when the browser window shrinks because all the contents of the page will be messed up. But I want it when the page first loads (width a min-height set in pixels, just in case). This is a very particular page in a website I am doing. Usually, 99.9% just percentage works well, I don't need convertions. — viery365, Jan 10 '17 at 10:03

score 1 · Answer 1 · answered Jan 12 '17 at 13:37

1

You can do it by window.resize() function References are on this docs: https://api.jquery.com/resize/

Ex of usage:

$(window).resize(function(){
    var windowHeight = $(window).innerHeight();
    console.log(windowHeight);
});

Much better if you use media-queries for window width specific sizes.

answered Jan 12 '17 at 13:37

Emperor Krauser

218
2
8

Thank you:) Now is already resolved but next time I will consider your answer in relation with the use of media queries for that. – viery365 Jan 12 '17 at 15:00

score 0 · Answer 2 · answered Jan 10 '17 at 09:48

0

You can try with attribute: background-size: cover;

answered Jan 10 '17 at 09:48

Nguyen Hung

24
2

Thank you:) I was given it a try but background-size: contain is really being doing a nice job because the image width is smaller than the div width containing it and I want to keep it in this way. – viery365 Jan 10 '17 at 10:00

score 0 · Accepted Answer · edited May 23 '17 at 11:52

Well, I am not a javaScript expert, so I will not post here the messied js I was able to code but I found a solution inspired by two things:

The first was as answer here. The accepted answer. It made me get to know $(window).height() and $(window).resize;
Then, I used a very simple but very useful plugin: jQuery afterresize event plugin: Apply something only when the resize is finished (not while dragging but when the mouse is up).

Turn Background image with percentage height into pixels height on window resize

3 Answers3