CSS Background Image position

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>top right</span></div>
<div  class="box">
<div class="box2">
</div>
<span>bottom right</span></div>
<div  class="box">
<div class="box3">
</div>
<span>bottom left</span></div>
<div  class="box">
<div class="box4">
</div>
<span>center center</span></div>
<div class="box">
<div class="box5">
</div>
<span>60px 10px</span></div>
</body>
</html>

CSS

.box{width:150px; height:150px;margin:10px;float:left;}
span{text-align:center;display:block;}
.box1,.box2,.box3,.box4,.box5{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: no-repeat;
  background-position:top right;
}
.box2 {
  background-image: url(https://background-tiles.com/overview/yellow/patterns/large/1041.png);
  background-repeat: no-repeat;
  background-position:bottom right;
}

.box3{
  background-image: url(https://background-tiles.com/overview/yellow/patterns/large/1041.png);
  background-repeat: no-repeat;
  background-position:bottom left;
}
.box4{
  background-image: url(https://background-tiles.com/overview/yellow/patterns/large/1041.png);
  background-repeat: no-repeat;
  background-position: center center;
}
.box5{
  background-image: url(https://background-tiles.com/overview/yellow/patterns/large/1041.png);
  background-repeat: no-repeat;
  background-position: 60px 10px;
}