Trying to add an image inside a CSS Grid

Question

How would I be able to put an image inside a CSS Grid?

This is all I\'m trying to do and can\'t figure it out.

This was my attempt at a CSS Grid:

Answer 1

You can try to use some gradient in case you cannot change the background image

.wrap {
  position: relative;
  width: 600px;
  height: 600px;
  margin-top: 45px;
  border:4px solid red;
  background-color:red;
  overflow: hidden;
  border-radius: 25px;
  background: 
    linear-gradient(red,red) calc(100%/3 - 1px)   0% /4px 100%,
    linear-gradient(red,red) calc(2*100%/3 + 1px) 0% /4px 100%,
    linear-gradient(red,red) 0% calc(100%/3 - 1px)   /100% 4px,
    linear-gradient(red,red) 0% calc(2*100%/3 + 1px) /100% 4px,
    url("https://i.imgur.com/1TbGgqz.png") no-repeat 0 -600px;
  background-repeat:no-repeat;
}

<div class="wrap">
  
</div>