Trying To Add An Image Inside A Css Grid

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: https://jsfiddle.net/g6oaht8f/72/ Bu

Solution 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% /4px100%,
    linear-gradient(red,red) calc(2*100%/3 + 1px) 0% /4px100%,
    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;
}

<divclass="wrap"></div>