Force div to have the size of background image

Question

When using a background image on a Div I am not able to display the full height of the image, neither using height:auto; or height: 100%. Why so? How can I solve the problem?

I have created a JS Fiddle here: https://jsfiddle.net/2d0npz2v/5/

body, html {
  height: 100%;
  margin: 0px;
}
.imageContainer2 {
  background-image: url("http://i.imgur.com/AWi7r5m.jpg");
  background-position: center top;
  background-size: 100% auto;
  height: 100%;
}

<div class="imageContainer2"></div>

UPDATE Just for clarity, the image needs to be 100% width, and auto height (not cut at the bottom). This example works but it's using the "content" property instead of the "background-image": https://jsfiddle.net/j47a6x7s/. I am looking for the same behaviour but without using content.

Works for me, you just forgot to set the ehight inn your fiddle. — AlexG, Dec 11 '15 at 12:21
@AlexG, no, the image is not fully displayed, some part of the image is cut at the bottom. — MeV, Dec 11 '15 at 12:24
your fiddle do not show image at all? guys do tell you ok that you need to put some height on your container, right? — Kresimir Pendic, Dec 11 '15 at 12:29
@oserk I have updated the link because for some reasons it was not showing the image, I don't know why — MeV, Dec 11 '15 at 12:32
@oserk no no, you should be able to scroll to see the full height of the image. Like this: https://jsfiddle.net/j47a6x7s/ but I don't want to use the property "content", I want to use the background-image property. — MeV, Dec 11 '15 at 12:46
god damn,, that's hard..but would like to know the answer :) — Kresimir Pendic, Dec 11 '15 at 12:53
@oserk hahah! You understand how I feel....!! Thanks for trying and let's hope someone can find an answer!! — MeV, Dec 11 '15 at 12:56
@MaRco85, there will always be one side clipped, unless you stretch the image. Which you can achive with `background-size: cover;` — AlexG, Dec 11 '15 at 14:13
Thanks @AlexG, I know about the cover option but that is not showing the full image.. as I need. — MeV, Dec 11 '15 at 15:32

score 9 · Accepted Answer · edited May 23 '17 at 12:10

9

Well, the reason why this is?

In your working example you use content. A content has it's own height and uses up space, which the other elements on the page have to respect.

With the background-image solution, you use a background, which does not use space. The .imageContainer2 element can not know about the height of the background-image AND adapt itself to it.

This very problem was addressed here: How to get div height to auto-adjust to background size?
Just check, if the workaround is suitable for you

edited May 23 '17 at 12:10

Community

1
1

answered Dec 14 '15 at 10:27

yunzen

32,854
11
73
106

Many thanks @HerrSerker, You are right and the question is actually explaining the same problem. – MeV Dec 14 '15 at 14:02
1

If you are in charge of the HTML Code, you could set the necessary CSS like `background-image`, `padding-bottom` as inline ` – yunzen Dec 18 '15 at 08:58
yes, definitely. thanks for the details! @HerrSerker – MeV Dec 18 '15 at 10:04

score 2 · Answer 2 · edited May 23 '17 at 12:10

If the image(s) you want to display in the background property always has the same aspect ratio, you can use one of the techniques explained here to make the div keep the same aspect ratio as the image according to the width.

With your example it would look like this :

body, html {
  height: 100%;
  margin: 0px;
}
.imageContainer2 {
  background-image: url("http://i.imgur.com/AWi7r5m.jpg");
  background-position: center top;
  background-size: auto 100%;
  padding-bottom:178%;
  background-repeat:no-repeat;
}

<div class="imageContainer2"></div>

Note that I don't know what you are trying to achieve exaclty. Using this method to display an image probably isn't semanticaly correct depending on the context.

Thanks web-tiki. I have chosen HerrSerker answer becuse the link he posted is exactly explaining my problem but your answer is also good. What I am trying to achieve is: not use img src, use background-image so I can replace the image sources using CSS media query, but I experienced issues with the height.. and also compatibility with different browsers. — MeV, Dec 14 '15 at 14:06

Kumar Divya · Answer 3 · 2018-06-01T05:58:41.110

  var bgImg = new Image();
  bgImg.src = $('.test').css('background-image').replace(/"/g,"").replace(/url\(|\)$/ig, "");
  bgImg.onload = function() {
  $('.test').css({'height':this.height,'width':this.width});
}

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<div class="test" style="background-image: url('https://images.pexels.com/photos/36487/above-adventure-aerial-air.jpg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260');">

</div>

Hope this exactly solves your issue.

score 0 · Answer 4 · answered Dec 11 '15 at 12:06

0

Try giving these three to your .imageContainer2:

.imageContainer2 {
  position: fixed;
  width: 100%;
  height: 100%;
}

Fiddle: https://jsfiddle.net/jsse9yL3/

answered Dec 11 '15 at 12:06

Praveen Kumar Purushothaman

164,888
24
203
252

height: 100%; is enough rt? – Sanjay Kumar N S Dec 11 '15 at 12:09
2

@SanjayKumarNS `position` is needed buddy. Coz there's nothing inside the `div`. – Praveen Kumar Purushothaman Dec 11 '15 at 12:09
1

Thanks @PraveenKumar but no this doesn't work, I cannot scroll to see the full height of the image :-/ – MeV Dec 11 '15 at 12:13
1

@MaRco85 So if you wanna have the height of the image, then you need to set the `height:` as the image's height and not the `100%`. – Praveen Kumar Purushothaman Dec 11 '15 at 12:14
Well, I really believe there is a more generic solution without having to specific the size of it, that's exactly what I was try to find out – MeV Dec 11 '15 at 12:15
1

@MaRco85 I had come across this. Well, there's no way to detect the height of the image when used using `url()`. Sorry! `:)` – Praveen Kumar Purushothaman Dec 11 '15 at 12:16
@PraveenKumar, so why when using "content:url("image.jpg");" the height is detected? – MeV Dec 11 '15 at 12:17
1

@MaRco85 Whatever you do, you can set the height and width relative to boundaries only. In this case, it is the window height. So if you wanna make it to work with the CSS, CSS doesn't have the power to detect the size of the image. – Praveen Kumar Purushothaman Dec 11 '15 at 12:17
I am grateful for your help but I hope someone can give a solution. If not, your answer will be the accepted one :-) – MeV Dec 11 '15 at 12:18
1

@MaRco85 Thanks buddy. Let's wait and see... I don't think it is possible, coz I am working on HTML / CSS for the past 8 years and I cannot figure this thing out. `:)` – Praveen Kumar Purushothaman Dec 11 '15 at 12:19
1

@MaRco85 Do you still wanna wait? – Praveen Kumar Purushothaman Dec 11 '15 at 12:28
@PraveenKumar yes, I will also open a bounty for this question, there seems to be many options but I cannot achieve what I want to have, see here: http://stackoverflow.com/questions/18901819/how-to-show-full-height-background-image – MeV Dec 11 '15 at 12:29

Dario Cancelliere · Answer 5 · 2015-12-14T11:26:36.693

0

You have to use an IMG for do that. Why you are insisting using CSS?

Example:

.container img
{
  width: 100%;
  height: auto;
}

<div class="container">
  <img src="http://www.wallpaperawesome.com/wallpapers-awesome/wallpapers-full-hd-1080-x-1920-smatphone-htc-one-lumia-1520-lg-g2-galaxy-s4-s5-awesome/wallpaper-full-hd-1080-x-1920-smartphone-vertical-stiped-nebula.jpg"/>
</div>

You can't calculate the background-image height with a CSS rule and then make the DIV height's equal. The closest solution for your problem is using a background-cover with all the related "issues".

UPDATE

Another CSS solution could be the padding-trick way, as follows:

.container
{
    background-image: url('http://www.wallpaperawesome.com/wallpapers-awesome/wallpapers-full-hd-1080-x-1920-smatphone-htc-one-lumia-1520-lg-g2-galaxy-s4-s5-awesome/wallpaper-full-hd-1080-x-1920-smartphone-vertical-stiped-nebula.jpg');
    background-size: contain;
    background-repeat: no-repeat;

    width: 100%;
    height: 0;

    padding-top: 177.77%; /* img-height / img-width * container-width (1920 / 1080 * 100) */
}

<div class="container">
  
</div>

I suggest anyway to use the first solution.

edited Dec 14 '15 at 11:26

answered Dec 14 '15 at 11:20

Dario Cancelliere

112
8

Thanks for your answer Dario, but If I am insisting with CSS there is a reason. I cannot set a src for the image (solution1) as I need to replace the image source using media css queries (and load different images for mobile/tablet etc). solution2 is also not good because it's cropping part of image and it is not even the same result as using a simple tag with the src as in solution1. – MeV Dec 14 '15 at 12:16
You are welcome Marco but there is no other solution unfortunately. You have to build media query classes and insert multiple different IMGs that will be hidden depending on device resolution, I can provide to you an example if you need. By the way, the second solution isn't cropping anything, the result is identical to the first solution. – Dario Cancelliere Dec 14 '15 at 12:20
You are actually right Dario, I am sorry I didn't notice the padding-top attribute in the second solution (which is probably the most correct one http://stackoverflow.com/questions/600743/how-to-get-div-height-to-auto-adjust-to-background-size). However I cannot use multiple different images otherwise they will all get downloaded (even if they are hidden). Thank you anyway for your answer and patience! – MeV Dec 14 '15 at 14:08

score 0 · Answer 6 · answered Dec 16 '20 at 04:42

0

You can use:

.imageContainer2 {
  overflow: hidden;
  position: relative;
  background-repeat: no-repeat;
  background-position: 50%;
  margin: auto;
  min-height: 100vh;
  background-size: cover;
}

answered Dec 16 '20 at 04:42

Diosbel Mezquía

101
1

score -3 · Answer 7 · edited Dec 11 '15 at 12:56

-3

Try to:

body {
    padding: 0px;
}

edited Dec 11 '15 at 12:56

lalibi

3,057
3
33
41

answered Dec 11 '15 at 12:37

Alex

9
6

Force div to have the size of background image

7 Answers7