Background-size: cover not setting height of background image

Question

I'm trying to get a background image to fill a div completely. Using

.class{
   background-image: url('img.jpg');
   background-repeat: no-repeat;
   background-size: cover;
 }

and ( .row is from Foundation 6)

<div class="row columns">
  <div class="class">&nbsp;</div>
</div>

The image extends across the width of the container, however the height is only about 23px, presumably the line height of the   . How can I get his image's height to be the full height of the image with at the width set by cover ?

Answer 1

I am new in Foundation 6, but If you want to fill all the div and adjust with the width and height: I use this code for the background and also work direct in div:(This is from: https://css-tricks.com/perfect-full-page-background-image/ )

.class {

background: url(demo.jpeg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

}

Also, if you want to specify background size, used:

background-size: 80px 60px;

You can used:

@media screen {}

If you want to adjust the background or any part of the css class, base on the size of the screen

Important, check the: margin:0px; or padding:0px; margin:0px; or padding:0px;

Let me know if this help you or if you need something more specific.