CSS Adaptable Image Frame for Select Blocks

[AWB75]

Hello - I am interested in adding an image frame to the Media Grid of our Impact theme. I have created a PNG of the following frame using the directions in link from W3Schools.

https://www.w3schools.com/cssref/tryit.php?filename=trycss3_border-image

Ultimately the goal is to create an adaptive frame for when the window resizes or goes Mobile. I have had some success testing the code in W3Schools, but cannot get the code to work in the Media-Grid.Liquid file.

Sample page of the frame set up as part of the image. https://fuwafuwa-studios.myshopify.com/collections/health-wellness

Site - https://fuwafuwa-studios.myshopify.com/

Password - ohzist

Please let me know where I can be more clear…

Thank you,

Alex

[CodingSolution]

Use this code

.media-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.image-frame {
  position: relative;
}

.image-frame img {
  width: 100%;
  height: auto;
}

.image-frame:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('path-to-your-frame.png');
  background-size: cover;
  z-index: -1;
}

[AWB75]

Hi CodingSolution -

I pasted the code into the Media Grid Custom CSS and received the following layout, without the frame on each image element -

I also cannot save the session -

Here is the image link - https://cdn.shopify.com/s/files/1/0622/7797/6254/files/Main-Horiz-Image_1500x1000_b5ba9373-2603-426f-bfce-1d91765fdea1.png?v=1692311519