CSS Background Image Repeat -2nd-ex

by VIvek Vaishnav

HTML

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div  class="box">
<div class="box1">
</div>
<span>Repeat</span></div>
<div  class="box">
<div class="box2">
</div>
<span>Repeat-x</span></div>
</div>
<div  class="box">
<div class="box3">
</div>
<span>Repeat-y</span></div>
<div  class="box">
<div class="box4">
</div>
<span>No-Repeat</span></div>
</div>
</html>  
</body>

</html>

CSS

.box{width:210px; height:210px;margin:10px;float:left;}
span{text-align:center;display:block;}
.box1,.box2,.box3,.box4{width:100%; height:100%; border:2px solid #000;  background-size: 50px 50px; }

.box1 {
  background-image: url(https://background-tiles.com/overview/yellow/patterns/large/1041.png);
  background-repeat: repeat;
}
.box2 {
  background-image: url(https://background-tiles.com/overview/yellow/patterns/large/1041.png);
  background-repeat: repeat-x;
}

.box3{
  background-image: url(https://background-tiles.com/overview/yellow/patterns/large/1041.png);
  background-repeat: repeat-y;
}
.box4{
  background-image: url(https://background-tiles.com/overview/yellow/patterns/large/1041.png);
  background-repeat: no-repeat;
}