Is there a way to keep elements fixed in some point of a image that have object-fit: cover property?

Question

I have a image in 16:9 (1920 x 1080) of a draw with some led light strips on it.

My objective is to implement a div of a gradient color to simulate a light effect, but I can only make this when the image is static on the background. When I implement a object-fit: cover; property, the light div doesn't keep his position on the right area.

I have already tried to use background-image instead of tag and tried to create a wrapper with position relative and absolute. Also, I'm using only responsive values into the css (percentages and viewport).

I think that the problem is in the fact that the object-fit: cover adjusts the image with zooms, and the div image doesn't follow that.

That's the image I'am using on this project. There's already a pink light coming out the LED strips on the draw, and I'm trying to make a new light above the pink one with a div.

This green light is the div that I'm trying to put above the pink light:

      .cafe-image div.left-light {
        background: linear-gradient(
          to top,
          rgba(0, 0, 0, 0),
          rgba(101, 221, 137, 0.671)
        );
        width: 40%;
        height: 30%;

        transform: skew(28deg) rotate(15deg);

        position: absolute;
        top: 8.9%;
        left: -4.8%;
      }

It is not perfectly positioned, but I'm just trying to keep this green light on the right spot:

...But when I resize the tab, that green light just change his position:

In short, I would like to leave this div of the green light always in that specific point of the image, no matter the page size.

Full code:



  
    
    
    
    Document

user_2442099 · Answer

the easiest way would be to use another image of the same size , so object-fit would be used for both with same results.

here an example with for example an svg with a gradient and mix-blend-mode to mix both images:

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

div,
div img {
  height: 100vh;
  width: 100vw;
  object-fit: cover;
  display: block
}

div {
  display: grid;/* i use grid to pile image, you can use absolute too */
}

img {/* lets put image in the same grid cell and blend them with the page */
  grid-row: 1;
  grid-column: 1;
  mix-blend-mode: darken;
}

Here is the code of the SVG embed :

you can use your own images then use mix-blend-mode, a png or gif or whatever you fill confident with, the idea is to use image of the same size to follow together the object-fit rule ;)

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

div,
div img {
  height: 100vh;
  width: 100vw;
  object-fit: cover;
  display: block;
}

div {
  display: grid; /* i use grid to pile image, you can use absolute too */
}

img {
  /* lets put image in the same grid cell and blend them with the page */
  grid-row: 1;
  grid-column: 1;

  mix-blend-mode: darken;
}
div img:nth-child(3) {
  mix-blend-mode: screen;
}

here is the code of that second SVG holdin texts :

aside the question : To turn the svg into a daturi, i used https://dopiaza.org/tools/datauri/index.php

Edit about below comment using an object:

If you want to use an object to benefit svg interaction, you can instead set straight your svg inside the document instead wrapping it inside an object or even an img tag.

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

div,
div img,svg{
  height: 100vh;
  width: 100vw;
  object-fit: cover;
  display: block;
}

div {
  display: grid; /* i use grid to pile image, you can use absolute too */
}

img, svg {
  /* lets put image in the same grid cell and blend them with the page */
  grid-row: 1;
  grid-column: 1;
  height:100%;width:100%;overflow:hidden;
  mix-blend-mode: darken;
}
div svg {
  mix-blend-mode: screen;

  object-fit:cover;
  max-height:100vh;
  max-width:100vw;
}

Is there a way to keep elements fixed in some point of a image that have object-fit: cover property?

1 Answers