1

I have a problem, photo inside the DIV is not shown. Since I use the masonry grid and site is like Pinterest, I do not want to limit the height of image or inner, so I put the auto, but when I put the auto, or 100%, the image is not displayed, My code is below.

.inner {
    background-color: rgb(255, 255, 255);
    padding-bottom: 40px;
    height:auto;
    position: relative;
    overflow: hidden;
    border: 2px solid #ECECEC;
    margin-bottom: 30px;
}

.image-box {
 position:relative;
   height: auto;
    width: 100%;
    padding-right: 0px;
    padding-left: 0px;
    background-position: center;
    background-color: #4D4E56;
}

.image-box .img{
 width: 100%;
    display: block;
   float: left;
 background-repeat: no-repeat;
    background-size: cover;
 
}
<div class="inner">
  <a href="{{ link }}"><div class="image-box" style="background-image:url(http://placehold.it/350x550)"></div></a>

</div>
mplungjan
  • 169,008
  • 28
  • 173
  • 236
MR.Don't know
  • 235
  • 3
  • 14

5 Answers5

7

Your height of your image div is set to auto, although there is no content inside that div. This means the div's height is actually 0.

Change your height to a set value, and you should be able to see the image.

.image-box {
    position:relative;
    height: 150px;
    width: 100%;
    padding-right: 0px;
    padding-left: 0px;
    background-position: center;
    background-color: #4D4E56;
}

Yes, this limits the height which is what you don't want, but how else do you want it? You can easily scale the images to fill the div nicely and keeping ratio by adding:

background-size:cover;
Lee
  • 4,187
  • 6
  • 25
  • 71
2

of course it doesn't show because the div with the background-image doesn't have a height because it's empty ...

if you don't want to use height, add padding-bottom:40px from .inner to .image-box

and that .image-box img is useless because img doesn't exist. your image is as background-image to the div not an individual img element.

so use what css you want on .image-box not on a non-existing .image-box img

.inner {
    background-color: rgb(255, 255, 255);

    height:auto;
    position: relative;
    overflow: hidden;
    border: 2px solid #ECECEC;
    margin-bottom: 30px;
}

.image-box {
 position:relative;
   height: auto;
    width: 100%;
    padding-right: 0px;
    padding-left: 0px;
    background-position: center;
    background-color: #4D4E56;
        padding-bottom: 40px;
  background-repeat: no-repeat;
    background-size: cover;
   float: left;
   
}
<div class="inner">
  <a href="{{ link }}"><div class="image-box" style="background-image:url(http://placehold.it/350x550)"></div></a>

</div>
Mihai T
  • 17,254
  • 2
  • 23
  • 32
1

use this one:

.image-box {
    height: 350px;;
    width: 500px;
    padding-right: 0px;
    padding-left: 0px;
    background-position: center;
    background-color: #4D4E56;
    background-image:url(http://placehold.it/350x550);
}

HTML

<div class="inner">
    <a href="{{ link }}">
        <div class="image-box"></div>
    </a>
</div>

demo

Abdulla Nilam
  • 36,589
  • 17
  • 64
  • 85
fernando
  • 814
  • 1
  • 9
  • 24
  • 1
    Can you explain your answer? Code dumps aren't very helpful to most users without some sort of explanation. – j08691 Aug 26 '16 at 14:35
0

Your HTML is not right, it shold be like this:

<div class="inner">
  <a href="{{ link }}"><span class="image-box" style="background-image:url(http://placehold.it/350x550)"></span></a>
</div>

Use <span> instead of <div>. Also .image-box .img{} style is not right, since there is no img tag inside it. Finally your CSS should be like it is done in answer below:

.image-box{
    height: 350px;
    width: 500px;
    padding-right: 0px;
    padding-left: 0px;
    background-position: center;
    background-color: #4D4E56;
    background-image:url(http://placehold.it/350x550);
}
johannesMatevosyan
  • 1,974
  • 2
  • 30
  • 40
  • 1
    is inline element, whereas
    is a block element and it's not right to use `block` elements inside `inline` elements. Therefore you should use `` instead.
     – johannesMatevosyan Aug 26 '16 at 14:35
  • But it's perfectly valid HTML syntax in the HTML5 standard. HTML 4 not so much. – j08691 Aug 26 '16 at 14:36
  • http://stackoverflow.com/questions/1827965/is-putting-a-div-inside-an-anchor-ever-correct – mplungjan Aug 26 '16 at 14:36
  • yes it might be right in validator, but it's not right way to declare code, it breaks semantics. If you want to use `
    ` then you should replace default `display:block` with `display:inline-block`.
     – johannesMatevosyan Aug 26 '16 at 14:38
  • _"yes it might be right in validator, but it's not right way to declare code, it breaks semantics"_ That's entirely your opinion. – j08691 Aug 26 '16 at 14:41
0

Background Information:

Background images do not count as content in CSS, as it is only a style that is assigned to an element, like background-color. This means that auto won't work as there is actually no content in your div, so it has nothing to relate to.

How to fix it:

To fix this, you need to set your width and height to actual values, so that there is an actual size your div has to be.

Modified Code:

.inner {
  background-color: rgb(255, 255, 255);
  padding-bottom: 40px;
  height: auto;
  position: relative;
  overflow: hidden;
  border: 2px solid #ECECEC;
  margin-bottom: 30px;
}
.image-box {
  position: relative;
  height: 550px;
  width: 100%;
  padding-right: 0px;
  padding-left: 0px;
  background-position: center;
  background-color: #4D4E56;
}
.image-box .img {
  width: 100%;
  display: block;
  float: left;
  background-repeat: no-repeat;
  background-size: cover;
}
<div class="inner">
  <a href="{{ link }}"><div class="image-box" style="background-image:url(http://placehold.it/350x550)"></div></a>

</div>