17

Here's an example code

I've been wondering why the background-image doesn't show up unless I specific the image's width and height in pixels. I tried to specific only the width in percentage but it didn't work. The w3cschools.com was able to show the background image without specifying the width and height, but it works only in body background. Any explanation or solution workaround?

HTML

<div class="pic"></div>

CSS

.pic {
  background: url("http://i.imgur.com/HIt6f8r.png") no-repeat;
  display: block;
  position: relative;
  width: 244px;
  height: 230px;
  background-size: contain;
}
Kristina Bressler
  • 1,642
  • 1
  • 25
  • 60
  • I have similar problem with an anchor tag. I do define the height and width, still in effect it would have size 0x0... This makes no sense. I also tried with padding and this did not work either. – Lenny Oct 29 '21 at 12:30
  • Interesting setting it to display: inline-block made it actually show up. Which is very strange because it was not on display:none of course and anchor tags are thought to be inline-block by nature. – Lenny Oct 29 '21 at 12:34
  • Okay mystery solved: https://www.w3schools.com/cssref/pr_class_display.asp By nature the anchor tag is is display: inline Display inline means that no height and width property has any effect Changing it to inline-block gives the height and width a relevance – Lenny Oct 29 '21 at 12:37

6 Answers6

18

Your <div> element don't have any content, so the <div> height is 0px.
The width of the <div> is still 100%.
If you add any content to the div it will have some height and it will show a portion of image.
<body> by default has the height of the window, so you can see the background-image.

Persijn
  • 14,624
  • 3
  • 43
  • 72
Justinas
  • 41,402
  • 5
  • 66
  • 96
  • Thanks for the explanation! But what about solutions or something like that. I even used .pic:after to see how it works but it's acting weird. – Kristina Bressler Aug 24 '15 at 06:07
  • @KristinaBressler Try `body, html, .pic{min-height: 100%;}` or something like that – Justinas Aug 24 '15 at 06:46
  • You can also use [VH units,](http://caniuse.com/#search=vh) which have fairly good browser support. 100% height can get tricky once you start adding other elements to the page, unless you use absolute positioning. – Dre Aug 24 '15 at 08:34
  • I think I kinda found the solution by adding to the
    . http://codepen.io/kikibres/pen/doxvLE
     – Kristina Bressler Aug 24 '15 at 15:46
  • by default has zero height — not the height of the window. In order to make it so `html, body {height: 100%}` or something like that can be used. – daGo Jun 04 '18 at 10:09
16

I found a great alternative without specifying the height, thanks to http://blog.brianjohnsondesign.com/maintain-aspect-ratio-for-html-element-using-only-css-in-a-responsive-design/. HTML

<div class="pic"></div>

CSS

.pic {
  background: url("http://i.imgur.com/HIt6f8r.png") no-repeat;
  display: block;
  position: relative;
  width: 20%;
  height: 0;
padding-bottom: 20%;
  background-size: 100%;
}

All you need to do, assuming that it's a square, to match the padding-bottom to the width in css.

Update: I also heard about another solution that may be useful. http://www.mademyday.de/css-height-equals-width-with-pure-css.html

CSS

.pic {
position: relative;
width: 50%; 
}
.pic:before {
content: "";
    display: block;
    padding-top: 100%;  
}

although I haven't tested it out yet....

Kristina Bressler
  • 1,642
  • 1
  • 25
  • 60
2
<div class="pic"></div>

Div is container, it expects to have inner elements, when it's empty you must explicitly define height.

Medet Tleukabiluly
  • 11,662
  • 3
  • 34
  • 69
2

Your background image will not show because the div element has no content, this means that its height is 0.

You could use this jQuery code to make your div take the size of the window.

$(function () {

'use strict';
$('.div').height($(window).height());

$(window).resize(function () {
    $('.div').height($(window).height());

})

});

mohamed mouad
  • 17
  • 4
1

If you don't specify height, the size of your div is given by the size of its contents, i.e. it's 0x0, so you don't have much chance of seeing a background image. Add

border: 1px solid red;

to see how large your div is (or isn't).

Ulrich Schwarz
  • 7,598
  • 1
  • 36
  • 48
  • This helped. In addition, to fix this i just added float: left; and the image showed, just with width: 100%; – Adyyda Oct 27 '18 at 15:41
1

I am struggling with similar, trying to put text on top of image using css, but as I dont set height, it doesnt show. Have tried code above as well

.module5 {
background: url(image.jpg);
display: block;
background-size: 100%;
width: 100%;
height: 0;
position: relative;
float: left;
border: 1px solid red;
}

.mid h2 {
font-family: 'Roboto', sans-serif;
font-weight: 900;
color: white;
text-transform: uppercase;
margin: 0;
position: absolute;
top: 50%;
left: 50%;
font-size: 2rem;
transform: translate(-50%, -50%);
}

And where pointing it:

<div class="module5 mid" style="width: 100%;">
<h2>My Text</h2>
</div>

So unless I set a height of module, it just shows a red line(my border for testing)

Stig
  • 11
  • 1
  • A div needs at least a non-breaking space ( ) to get a height. And remove height: 0; from .module5 https://stackblitz.com/edit/typescript-4bjakv?file=style.css – Samuel Knoch Jan 31 '22 at 17:32