How to add a background square behind the image? - html

Question

I am trying to recreate this:
But I have not been able to do so. I tried with adding a :before on the img but that doesnt work. How would you go on about making this. It has to be responsive in the way that the background doesnt get bigger than the image.
SEO is not important so background-image or whatever is fine with me too.
WRITTEN IN SCSS - CHANGE IN HTML IS OK
UPDATED CODE TO ROB's ANSWER
This is the code I have so far
.imgbox {
padding: 5%;
position: relative;
height: auto;
.backdrop {
position: relative;
min-width: 100px;
min-height: 100px;
div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
background: rgb(208, 0, 0);
background: linear-gradient(
90deg,
rgba(208, 0, 0, 1) 0%,
rgba(149, 0, 0, 1) 100%
);
}
transform: translateX(-5px) translateY(5px);
}
.img {
width: 100%;
height: auto;
transform: translateX(5px) translateY(-5px);
}
}
<div className="imgbox">
<div className="backdrop">
<div></div>
</div>
<img
className="img"
src={'https://source.unsplash.com/400x250'}
alt="test"
>
</div>

Answer 1

It's simple with a box shadow.
The paddings in the parent are there to prevent it from cropping the shadow.
.imgbox {
padding: 0 0 30px 30px;
}
.imgbox .img {
display: inline-block;
box-shadow: -30px 30px 0 rgb(208, 0, 0);
}
<div class="imgbox">
<img
class="img"
src='https://source.unsplash.com/400x250'
alt="test"
/>
</div>

Answer 2

Very easy to get the gradient with a pseudo-element:
.image-container::after {
content:'';
position: absolute;
z-index:-1;
bottom:-24px;
left:-24px;
width:100%;
height:100%;
background: linear-gradient(red, firebrick);
}
You can change the gradient and offset using background, left and bottom respectively. I'm not sure if there is a second gradient as well, to the top right? If so, you pair this with a ::before to get a second background, and play around the with z-index to get the ordering correct.
Just remember - for an absolute positioned pseudo element to work, you'll need to set position:relative on the parent container, and content:'';
Codepen here.