2

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?

Brett
  • 19,449
  • 54
  • 157
  • 290
  • 1
    Hey Brett, could you plese clarify what you want it to do? I made a fiddle here: https://jsfiddle.net/5uyxsxn4/. The image exands to fill the whole div(screen). is this what you want? do you want to always show full height and have white border on the left/right? – Martin Gottweis May 12 '15 at 08:33
  • You want to always see the whole background image regardless of aspect ration? – Samurai May 12 '15 at 08:36
  • @MartinGottweis I edited my question to clarify. – Brett May 12 '15 at 08:45
  • Oh, I am not sure I understand now. Do you have a demo website of the problem? The background-size set to cover will expand the image to fill the div. Another option is to stretch the image which sounds unlikely. – Martin Gottweis May 12 '15 at 08:51
  • @MartinGottweis I guess you can take a look at this website: http://www.abigailburton.com.au/ You will see once you get to larger sizes such as `1920px` that you will start to lose the bottom of the laptop for example. – Brett May 12 '15 at 09:50

2 Answers2

1

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.

Vandervals
  • 5,774
  • 6
  • 48
  • 94
  • I was thinking about the same approach. +1 – kreig May 12 '15 at 08:53
  • Fair points. I mean it's not a massive issue if some of it doesn't display, but I guess it would be ideal. Can't really use the tag as content is displayed on top of it and don't really want to using absolute positioning to place the content nor would the background expand horizontally if I did that. – Brett May 12 '15 at 09:54
1

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);
}
Community
  • 1
  • 1
Samurai
  • 3,724
  • 5
  • 27
  • 39
  • Wouldn't that take control of the background at *any* breakpoint and affect the smaller backgrounds rather than just kick in once the background gets bigger than the largest size? – Brett May 12 '15 at 09:48
  • I doubt that, any height smaller than the min-height shouldn't have any effect. You can add any condition though before the last line. E.g `if(elw > bgw)`. If the aspect ratio is kept regardless of size change, then the same issue will arise if the container has a smaller width as well, portions of height, will be invisible. But I might not have understood the problem correctly. – Samurai May 12 '15 at 10:30