<!--
Forum question answer only:

https://www.sitepoint.com/community/t/image-bordering-around-another-image/377557

-->

<img class="bordered" src="https://jcaldwell.neocities.org/Images/football_field.jpg" width="1000" height="270">
img.bordered {
  padding: 25px;
  background: url(https://jcaldwell.neocities.org/Images/tic-tac-toe.png) repeat
    0 0;
  background-size: 25px 25px;
  -webkit-filter: grayscale(100%);
  max-width: 100%;
  box-sizing: border-box;
  display: block;
  margin: 1rem auto;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.