seo Question posted in
Some basic information to get you started with this can be found here.

How to add a background square behind the image? – SEO

I am trying to recreate this:

What I am trying to accomplish

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>
Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search