Background does not work

Question

Background does not work

Navigation

#1 by (3 votes)
#2 by (0 votes)

2

I'm trying to apply the CSS below in a div to use a background, but it does not 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>

Background CSS

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 that I'm using for the 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%;
        }
    }

html css css3 background

asked by anonymous 02.01.2017 / 00:28

2 answers

0

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

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

See

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>

02.01.2017 / 00:54

I can not center the text Hosting Laravel 5.3 system in subdomain

score 3 · Accepted Answer

What is 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 have helped !!!