Démo background-repeat 2

by Arnaud

HTML

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

</div>

<div class="boiteParent">
no-repeat :
<div class="boiteFlotante boiteFlotante2" > </div>

</div>

<div class="boiteParent">
repeat-x :
<div class="boiteFlotante boiteFlotante3" > </div>

</div>

<div class="boiteParent">
repeat-y :
<div class="boiteFlotante boiteFlotante4" > </div>

</div>

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

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

</div>

CSS

.boiteParent{
position:relative;
margin:0 10px 40px;
float:left;
width:150px;
}

.boiteFlotante{

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

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


}
.boiteFlotante2{
background-repeat:no-repeat;

}
.boiteFlotante3{
background-repeat:repeat-x;

}
.boiteFlotante4{
background-repeat:repeat-y;

}

.boiteFlotante5{
background-repeat:round;

}

.boiteFlotante6{
background-repeat:space;

}