0

Context

I'm trying to build a page that shows football player positions across the field. They are displayed by a shirt icon, which is made of two parts:

  • SVG of the shirt, whose colour can be customised
  • PNG of the shading, which is the same exact shape as the SVG

Problem

While on some displays/screens the images line up, on others the SVG is slightly larger than the PNG, which doesn't look good aesthetically. I'm trying to line them up exactly or the effect won't work.

I've also ensured that the space the images inhabit should be the same width (100% of the parent), however when looking on developer tools the background is sometimes marginally taller than the PNG above it:

Problem imageParent sizeImage size

As you can see in the above examples, the height seems inconsistent, as some of the images appear to be lined up correctly. This is doubly odd to me as they all have the same CSS rules.

Code

#cont {
  height: 100%;
  width: 100%;
  text-align: center;
  color: white;
  background-color: gray;
}

ul {
  height: 25%;
  list-style: none;
  margin: 0;
  padding: 0;
  display: block;
}

li {
  list-style: none;
  display: inline-block;
  width: 18%;
  font-size: 12px;
  text-align: center;
  text-transform: uppercase;
  box-sizing: border-box;
  margin: 0.5em 0;
  padding: 0.25em;
}

.kit {
  width: 100%;
  background-image: url(http://bkdev.co.uk/tmp/kit-bg.svg);
  background-size: contain;
  background-position: top center;
  background-repeat: no-repeat;
}
<div id="cont">
  <ul>
    <li>
      <div class="kit">
        <img src="https://i.imgur.com/dEzQ5zc.png" width="100%">
      </div>J SMITH
    </li>
  </ul>
  <ul>
    <li>
      <div class="kit">
        <img src="https://i.imgur.com/dEzQ5zc.png" width="100%">
      </div>J SMITH
    </li>
    <li>
      <div class="kit">
        <img src="https://i.imgur.com/dEzQ5zc.png" width="100%">
      </div>J SMITH
    </li>
  </ul>
</div>

How can I make this work correctly, and ensure both images are lined up exactly? Or is this a wild goose chase?

Community
  • 1
  • 1
Ben
  • 8,894
  • 7
  • 44
  • 80
  • the best is to use multiple background and use the same background properties for both images – Temani Afif Aug 19 '19 at 22:06
  • I disagree with this being shut down - even with using the exact same background properties it doesn't work. – Ben Aug 19 '19 at 22:09
  • If the SVG and the image are designed to have the same ratio (which is the case) then used as multiple background will make them exactly on the top of each other if used with the same background properties. by the way, this was a simple suggestion, the main issue of your actual code is explained in the duplicate. – Temani Afif Aug 19 '19 at 22:15

0 Answers0