Démo background-origin

by Arnaud

HTML

<div class="boiteParent">
background-origin : padding-box
<div class="boiteFlotante boiteFlotante1" > </div>

</div>

<div class="boiteParent">
background-origin : border-box
<div class="boiteFlotante boiteFlotante2" > </div>

</div>

<div class="boiteParent">
background-origin : content-box
<div class="boiteFlotante boiteFlotante3" > </div>

</div>

CSS

.boiteParent{
position:relative;
margin:0 10px 40px;
float:left;
  width:390px;
  height:300px;
font-size:12px;
box-sizing:border-box;
}

.boiteFlotante{
box-sizing:border-box;
background-size:100%;
    background-image : url('https://labellelumiere.fr/formation/photo-1.jpg');
background-repeat:no-repeat;
border:20px solid #ccc;
padding:40px;
width:100%;
  height:100%;
  position:relative;
  float:left;
  margin:0 20px 0 0;
  text-align:cover;

}
.boiteFlotante1{
background-origin : padding-box
}
.boiteFlotante2{
background-origin : border-box

}
.boiteFlotante3{
background-origin : content-box

}