Démo background-size

by Arnaud

HTML

<div class="boiteParent">
défaut  :
<div class="boiteFlotante boiteFlotante1" > </div>

</div>

<div class="boiteParent">
background-size:100%
<div class="boiteFlotante boiteFlotante2" > </div>

</div>

<div class="boiteParent">
background-size:50%
<div class="boiteFlotante boiteFlotante3" > </div>

</div>

<div class="boiteParent">
background-size:50% 20px
<div class="boiteFlotante boiteFlotante4" > </div>

</div>

<div class="boiteParent">
cover :
<div class="boiteFlotante boiteFlotante5" > </div>

</div>
<div class="boiteParent">
contain :
<div class="boiteFlotante boiteFlotante6" > </div>

</div>

CSS

.boiteParent{
position:relative;
margin:0 10px 40px;
float:left;
width:150px;
height:100px;
font-size:12px;
}

.boiteFlotante{

    background-image : url('https://digitalin.fr/img-exos/logo_ff.png');

border:1px solid black;
  min-width:150px;
  height:100px;
  position:relative;
  float:left;
  margin:0 20px 0 0;
  text-align:center;
}
.boiteFlotante1{
background-size:100px ;
}
.boiteFlotante2{
background-size:100% ;

}
.boiteFlotante3{
background-size:50%;


}
.boiteFlotante4{
background-size:50% 20px;

}

.boiteFlotante5{
background-size:cover;

}

.boiteFlotante6{
background-size:contain;

}