.block-1 {
box-sizing: border-box;
width: 64px;
height: 64px;
background:url('images/grass.png');
background-size: contain;
position: absolute;
left:64px;
}
.block-2 {
box-sizing: border-box;
width: 128px;
height: 64px;
background:url('images/grass.png');
background-size: contain;
}
.block-3 {
box-sizing: border-box;
width: 192px;
height: 64px;
background:url('images/grass.png');
background-size: contain;
position: relative;
left:64px;
}
.flower {
box-sizing: border-box;
width: 64px;
height: 64px;
background:url('images/rose.png');
background-size: contain;
position: relative;
left: 128px;
}
.yellow-flower {
box-sizing: border-box;
width: 64px;
height: 64px;
background:url('images/flower.png');
background-size: contain;
position: relative;
left: 128px;
}
.point {
width: 8px;
height: 8px;
background: rgb(255, 176, 0);
}
.bg {
border: solid 8px rgb(210, 157, 65);
background: rgb(36, 130, 255);
width: 320px;
height: 256px;
position: absolute;
left: 50%;
top:50%;
transform: translate(-50%,-50%);
}
body {
margin: 0;
background: url('images/brick.jpg');
background-size: 150px 150px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Learn css with blocks</title>
<link rel="stylesheet" href="block.css" media="screen" title="no title" charset="utf-8">
</head>
<body>
<div class="bg">
<div class="yellow-flower">
<div class="point">
</div>
</div>
<div class="block-3"></div>
<div class="block-1"></div>
<div class="block-1" style="left:192px;"></div>
<div class="flower">
<div class="point">
</div>
</div>
<div class="block-3"></div>
</div>
</body>
</html>
