Background does not work

Question

I’m trying to apply the CSS below on a div to use a background, but it doesn’t appear at all.

HTML

<div class="row background-1">
    <div class="col col-2">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eu efficitur magna, eu sodales lorem. Proin sem lectus, congue nec scelerisque rhoncus, commodo vel orci. Nunc sed ligula hendrerit, pharetra augue quis, auctor lorem. Vestibulum quis varius libero, ac commodo velit. Mauris sodales lobortis euismod.
    </div>
    <div class="col col-4">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eu efficitur magna, eu sodales lorem. Proin sem lectus, congue nec scelerisque rhoncus, commodo vel orci. Nunc sed ligula hendrerit, pharetra augue quis, auctor lorem. Vestibulum quis varius libero, ac commodo velit. Mauris sodales lobortis euismod.
    </div>
</div>

CSS of the background

div.background-1 {
  background: url(http://i.imgur.com/FyMaZlK.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

CSS I’m using for columns

.col {
    border:0px solid rgba(0,0,0,0);
    float:left;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    -moz-background-clip:padding-box !important;
    -webkit-background-clip:padding-box !important;
    background-clip:padding-box !important;
}
    @media screen and (min-width: 0px) {

        .col {
            margin-left:2%;
            padding:0 1.5%;
        }

        .row .col:first-child {
            margin-left:0;
        }
        .col-1 {
            width:15.0%;
        }
        .col-2 {
            width:32.0%;
        }
        .col-3 {
            width:49.0%;
        }
        .col-4 {
            width:66.0%;
        }
        .col-5 {
            width:83.0%;
        }
        .col-6 {
            margin-left:0;
            width:100%;
        }
    }

Answer 1

What’s happening is that the background is working, but your div is not following the content inside it, so in css add:

display: table; 

.background-1 {
  background: url(http://i.imgur.com/FyMaZlK.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
 display:table;
}
.col {
    border:0px solid rgba(0,0,0,0);
    float:left;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    -moz-background-clip:padding-box !important;
    -webkit-background-clip:padding-box !important;
    background-clip:padding-box !important;
}
    @media screen and (min-width: 0px) {

        .col {
            margin-left:2%;
            padding:0 1.5%;
        }

        .row .col:first-child {
            margin-left:0;
        }
        .col-1 {
            width:15.0%;
        }
        .col-2 {
            width:32.0%;
        }
        .col-3 {
            width:49.0%;
        }
        .col-4 {
            width:66.0%;
        }
        .col-5 {
            width:83.0%;
        }
        .col-6 {
            margin-left:0;
            width:100%;
        }
    }

<div class="row background-1">
    <div class="col col-2">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eu efficitur magna, eu sodales lorem. Proin sem lectus, congue nec scelerisque rhoncus, commodo vel orci. Nunc sed ligula hendrerit, pharetra augue quis, auctor lorem. Vestibulum quis varius libero, ac commodo velit. Mauris sodales lobortis euismod.
    </div>
    <div class="col col-4">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eu efficitur magna, eu sodales lorem. Proin sem lectus, congue nec scelerisque rhoncus, commodo vel orci. Nunc sed ligula hendrerit, pharetra augue quis, auctor lorem. Vestibulum quis varius libero, ac commodo velit. Mauris sodales lobortis euismod.
    </div>
  
</div>

I hope I’ve helped!!!

Answer 2

The background is being correctly applied the problem is that if you inspect the element in which the background, you will see that its size is of 0x0. This is because all the elements within it have a float: left, which in a way disables the width: auto and height: auto element standard div.

You can circumvent this in two ways: or you apply a display: inline-block in div.background-1, or you define it with a width specific, for example, 100%.

Behold

div.background-1 {
  background: url('http://i.imgur.com/FyMaZlK.jpg') no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  width: auto;
  height: auto;
  display: inline-block;
}

.col {
  display: block;
  border: 0px solid rgba(0, 0, 0, 0);
  clear: right;
  float: left;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -moz-background-clip: padding-box !important;
  -webkit-background-clip: padding-box !important;
  background-clip: padding-box !important;
}

@media screen and (min-width: 0px) {
  .col {
    margin-left: 2%;
    padding: 0 1.5%;
  }
  .row .col:first-child {
    margin-left: 0;
  }
  .col-1 {
    width: 15.0%;
  }
  .col-2 {
    width: 32.0%;
  }
  .col-3 {
    width: 49.0%;
  }
  .col-4 {
    width: 66.0%;
  }
  .col-5 {
    width: 83.0%;
  }
  .col-6 {
    margin-left: 0;
    width: 100%;
  }
}

<div class="row background-1">
  <div class="col col-2">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eu efficitur magna, eu sodales lorem. Proin sem lectus, congue nec scelerisque rhoncus, commodo vel orci. Nunc sed ligula hendrerit, pharetra augue quis, auctor lorem. Vestibulum quis varius
    libero, ac commodo velit. Mauris sodales lobortis euismod.
  </div>
  <div class="col col-4">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eu efficitur magna, eu sodales lorem. Proin sem lectus, congue nec scelerisque rhoncus, commodo vel orci. Nunc sed ligula hendrerit, pharetra augue quis, auctor lorem. Vestibulum quis varius
    libero, ac commodo velit. Mauris sodales lobortis euismod.
  </div>
</div>