<!DOCTYPE HTML>
<html>
<style type="text/css">
div {
    width: 200px;
    height: 200px;
}
</style>
<div style="background: url('./resources/dot.png') center / 0px 50px repeat-x"></div>
<div style="background: url('./resources/dot.png') center / 50px 0px repeat-x"></div>
<div style="background: url('./resources/dot.png') center / 0px repeat-x"></div>
<div style="background: url('./resources/dot.png') center / 0px 0px repeat-x"></div>
<div style="background: url('./resources/dot.png') center / 0% 50% repeat-x"></div>
<div style="background: url('./resources/dot.png') center / 50% 0% repeat-x"></div>
<div style="background: url('./resources/dot.png') center / 0% repeat-x"></div>
<div style="background: url('./resources/dot.png') center / 0% 0% repeat-x"></div>
</html>