2

I have the following div on my page:

<div id="logo">
</div>

I would like to put a background image in this div:

#logo {
    background: url('logo3_light.jpg') no-repeat;
    width: 100%;
    height: auto;
}

But the image never shows up, because the height of the div is 0px.

I would like somehow to set the height of the wrapping div to the height of the scaled image. Is it possible?

Konstantin Milyutin
  • 11,946
  • 11
  • 59
  • 85
  • what is the size (width and height) of your logo jpg? – Fabrizio Calderan Feb 27 '14 at 15:41
  • 1600x100px, but I don't want to set height: 100px, I want it to be calculated dynamically, depending on the width, like height: auto – Konstantin Milyutin Feb 27 '14 at 15:43
  • Will the `div` have content in it eventually? And is there a reason you don't want to set `div { height: 100px; }` ? – TylerH Feb 27 '14 at 15:44
  • try giving it a minimum height and width of 1px. If still the same, some js might be required – AzDesign Feb 27 '14 at 15:44
  • 1
    possible duplicate of [How to get div height to auto-adjust to background size?](http://stackoverflow.com/questions/600743/how-to-get-div-height-to-auto-adjust-to-background-size) – TylerH Feb 27 '14 at 15:45
  • Well, if I set a fixed height, then if width becomes smaller, image will not scale, will it? – Konstantin Milyutin Feb 27 '14 at 15:45
  • @damluar see Fabrizio's answer for how to set percentage height. I would recommend you check out the URL in my "duplicate" comment, though; it has a lot of useful information. – TylerH Feb 27 '14 at 15:49

3 Answers3

5

Since your original image is 1600x100 the height is 6.25% of its width, so you could try this

#logo {
    background: url(http://dummyimage.com/1600x100/000/fff.jpg) no-repeat;
    width: 100%;
    height: auto;
    padding-bottom : 6.25%; 
    background-size: cover; 
}

Example on codepen: http://codepen.io/anon/pen/EnJvI

Note: you can't simply use height: 6.25% because the height would be relative to the height of the parent element (the body element, whose height is not defined and it is 0, since your logo element is empty).

The padding-bottom use instead the width of the element itself to calculate the correct value (this technique is often used to keep the correct aspect ratio of videos on responsive design, fyi).

Anyway, I don't recommend to use empty markup for styling purpose: your logo should be a regular img element rather than a background, since a logo usually conveys information

Fabrizio Calderan
  • 120,726
  • 26
  • 164
  • 177
  • grazie! One more question: your solution works, but why I can't set 6.25% on height directly? Somehow it doesn't work that way. – Konstantin Milyutin Feb 27 '14 at 15:52
  • 1
    This is due to the choice of a relative unit: it would be `6.25%` based on parent height (but the `body` has no height defined), while the `padding-bottom` calculates `6.25%` of the width of the element itself – Fabrizio Calderan Feb 27 '14 at 15:56
  • So 6.25% in height and 6.25 in padding are 2 different values? – Konstantin Milyutin Feb 27 '14 at 15:58
  • Regarding your comment about using regular `img` tag. I just learn media queries and I wanted to try to load 2 different images for different screen size. May be there is a better way for this. – Konstantin Milyutin Feb 27 '14 at 16:00
  • @damluar Yes. If you set `height: 6.25%;` then it won't work, since it is trying to calculate 6.25% of the parent element, which is an empty logo `div`. It's like trying to find 6.25% of 0 (hint: it's still 0). That is why it doesn't work. Setting `height: auto;` makes the height big enough to contain all its children elements. – TylerH Feb 27 '14 at 16:00
  • @TylerH, your answer is not correct. When I set 6.25% to height, I see the image, but it's just some part of the whole image. – Konstantin Milyutin Feb 27 '14 at 16:12
  • I'm not sure how, since your parent element is empty. Maybe you have some residual `padding-bottom` code? – TylerH Feb 27 '14 at 16:14
  • My page has other elements, so the height is not 0. – Konstantin Milyutin Feb 27 '14 at 16:15
  • @FabrizioCalderan, are there better solutions to load diff. images depending on the screen size? – Konstantin Milyutin Feb 27 '14 at 16:17
  • of course, for background images you can use mediaqueries, as you already know: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries – Fabrizio Calderan Feb 27 '14 at 16:18
  • Yes, I apply them, but then I can't use `img` tag and I have to play with css to load required image. – Konstantin Milyutin Feb 27 '14 at 16:28
0

Answer as found here: How to get div height to auto-adjust to background size?

<div style="background-image: url(http://your-image.jpg);">
    <img src="http://your-image.jpg" style="visibility:hidden"/>
</div>
Community
  • 1
  • 1
SimplyAzuma
  • 25,214
  • 3
  • 23
  • 39
-1

Unfortunately, there is no easy way. You could for example using javascript get url of the image, load it and get its dimensions, then set the dimensions to the div element.

What I would do, would, be just directly use tag to put image in the div. If you need additional content, you could put the content in another div inside the div you already have. Then the internal divs positioning can be set to absolute etc etc, hope it gives you idea how to do it

Grishka
  • 49
  • 1