Adding an image background to each product summary item

Site URL: https://saxophone-calliope-f29a.squarespace.com/

Hello,

To better my skills, I'm re-creating a website that I love and I think has some great design. There are several things I'm still working on but I specifically need help with the product summary block. I would like to add a background image to each product card.  A photo of exactly what I would like to achieve is below. 

I would also love to move the copy from below the image to above it, again to mimic the screenshot below. 

If you have any idea what code to use for this I would greatly appreciate it!

Here is the link to my site: https://saxophone-calliope-f29a.squarespace.com/
The password to access my site is: brineintopedro

Here is the original site I am using as a reference: https://ujjo.com/

Thanks! I was able to implement this and the image now shows up. I was also able to re-order the content as I wanted, but now everything is looking compact and I'm having trouble getting it to size correctly. Anyone have any ideas there? 

On 4/14/2022 at 7:11 AM, Carlieann said:

Thanks! I was able to implement this and the image now shows up. I was also able to re-order the content as I wanted, but now everything is looking compact and I'm having trouble getting it to size correctly. Anyone have any ideas there? 

Hi,

You mean resize bold text size???

Actually, I mean each card! I changed the display type to flex in order to change the positioning of the meta data and title of each summary card to be above the image (instead of below) but that also changed the size of each summary item. Attaching a screenshot of what it currently looks like. 

On 4/21/2022 at 5:52 AM, Carlieann said:

Actually, I mean each card! I changed the display type to flex in order to change the positioning of the meta data and title of each summary card to be above the image (instead of below) but that also changed the size of each summary item. Attaching a screenshot of what it currently looks like. 

Yes. Flex will break summary layout. You can remove the code, then we will try some other code to move title/meta data position