CODEWITHSUNDEEP
javascriptjquerycssbackground-size
Brett
Brett

Reputation: 20049

Getting the new height of backround image when using CSS background-size: cover?

I'm using the background-size: cover; in CSS and whilst it works well, I have noticed that once it "kicks in" then you may have issues with the whole height of the background image not displaying.

For example, I have code something like this:

#home .top {
    min-height: 768px;
    background: #fff url('../images/home-bg-lg.jpg') center top no-repeat;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
}

Now, the min-height: 768px; refers to the actual height of the image, so I set that to make sure it always shows the full height regardless of the content; however obviously once the background size starts to increase the height increases too and hence the 768px size is no longer large enough and a lot of the background is not shown.

Is there anyway to fix this with CSS, if not, how about with JavaScript, preferably jQuery?

If only a JavaScript/jQuery solution it may be worth mentioning that I use breakpoints and utilise smaller background images at smaller resolutions; nothing needs to be applied to these.

Edit: To clarify, I was wondering if it was possible so that when it expands it always shows the full height of the image. So for example if it was using an image that was 1600 x 768 and someone viewed it on 1920 x 900 resolution than it would expand to 1920px width and hence it would be good if the min-height could change to 922px as that would be the correct height of it now?

Upvotes: 2

Views: 95

Answers (2)

Samurai
Samurai

Reputation: 3729

I assumed you have background's original dimensions, if not here's how you can get it

var bgw = 1600;
var bgh = 768;

function coverBg() {
    var el = $('#home .top');
    var elw = el.outerWidth();
    var elh = el.outerHeight();
    var newHeight = elw*bgh/bgw;
    el.css('height', newHeight);
}

Upvotes: 1

Vandervals
Vandervals

Reputation: 6054

I'd say that if the image is a background, then it is just "decoration", therefore it isn't so important if it crops a little or not. If your image is important, then it is part of the "content" of your page, then you should use the tag to place it. This way it autogrows. If you still want to show the image as a background, you can't get the rendering height, so you'll have to do some javascript calculous:

  1. create an image object to obtain the width and height of the bg image:

    var height, width, proportion; var img = new Image(); img.src = imageurl; img.onload = function(){ height = img.height; width = img.width; proportion = width/height; }

  2. Then you can compare the proportion of the image with the proportion of the container to see if it is more vertical or more horizontal.

  3. If it is more vertical, then it is croping the sides, if it is more horizontal, it is croping the top and the bottom.
  4. When you know this, you can change the size of the container to fit the proportions of the image.

EDIT: My personal opinion is that doing this with js is kind of messy. In most of the cases, it is better to use the tag or forget about those croped parts. If you think that an important part of the image isn't showing, maybe you can play a little with the background-position, to make sure that the focus of the image is always displayed.

Upvotes: 1

Related Questions