'Is there a way to keep elements fixed in some point of a image that have object-fit: cover property?
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 <img> 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:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
overflow: hidden;
}
.cafe-image {
position: relative;
}
.cafe-image img {
object-fit: cover;
width: 100vw;
height: 100vh;
}
.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%;
}
</style>
</head>
<body>
<div class="cafe-image">
<img src="https://i.postimg.cc/jq6xMxMC/cafe.jpg"/>
<div class="left-light"></div>
</div>
</body>
</html>
Solution 1:[1]
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;
}<div>
<img src="data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D%221919%22%20height%3D%22963%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20style%3D%22%0D%0Adisplay%3Ablock%3B%0D%0Awidth%3A1963px%3B%0D%0Aheight%3A963px%3B%0D%0Abackground%3A%20linear-gradient%2876.5deg%2C%20transparent%2040.25%25%2C%20white%2040.5%25%29%2C%20linear-gradient%2815.5deg%2C%20transparent%2064.5%25%2C%20white%2065%25%29%2Clinear-gradient%2815deg%2Ctransparent%2020%25%20%2C%20rgb%28101%2C%20221%2C%20137%29%2060%25%29%3B%22%3E%0D%0A%20%20%3Crect%20width%3D%221919%22%20height%3D%22963%22%20x%3D%220%22%20y%3D%220%22%20fill%3D%22transparent%22%20%2F%3E%0D%0A%3C%2Fsvg%3E">
<img src="https://i.stack.imgur.com/YwLqP.jpg"></div>Here is the code of the SVG embed :
<svg width="1919" height="963" xmlns="http://www.w3.org/2000/svg" style="
display:block;
width:1963px;
height:963px;
background: linear-gradient(76.5deg, transparent 40.25%, white 40.5%), linear-gradient(15.5deg, transparent 64.5%, white 65%),linear-gradient(15deg,transparent 20% , rgb(101, 221, 137) 60%);">
<rect width="1919" height="963" x="0" y="0" fill="transparent" />
</svg>
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;
}<div>
<img src="data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D%221919%22%20height%3D%22963%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20style%3D%22%0D%0Adisplay%3Ablock%3B%0D%0Awidth%3A1963px%3B%0D%0Aheight%3A963px%3B%0D%0Abackground%3A%20linear-gradient%2876.5deg%2C%20transparent%2040.25%25%2C%20white%2040.5%25%29%2C%20linear-gradient%2815.5deg%2C%20transparent%2064.5%25%2C%20white%2065%25%29%2Clinear-gradient%2815deg%2Ctransparent%2020%25%20%2C%20rgb%28101%2C%20221%2C%20137%29%2060%25%29%3B%22%3E%0D%0A%20%20%3Crect%20width%3D%221919%22%20height%3D%22963%22%20x%3D%220%22%20y%3D%220%22%20fill%3D%22transparent%22%20%2F%3E%0D%0A%3C%2Fsvg%3E">
<img src="https://i.stack.imgur.com/YwLqP.jpg">
<img src="data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D%221919%22%20height%3D%22963%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20%3E%0D%0A%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%221919%22%20height%3D%22963%22%20fill%3D%22rgba%280%2C%200%2C%200%2C%200%29%22%3E%3C%2Frect%3E%0D%0A%3Cg%20transform%3D%22matrix%281%200%200%201%20928.5%20290.1%29%22%20style%3D%22%22%20%20%3E%0D%0A%09%09%3Ctext%20xml%3Aspace%3D%22preserve%22%20font-family%3D%22%27Open%20Sans%27%2C%20sans-serif%22%20font-size%3D%2240%22%20font-style%3D%22normal%22%20font-weight%3D%22normal%22%20style%3D%22stroke%3A%20none%3B%20stroke-width%3A%201%3B%20stroke-dasharray%3A%20none%3B%20stroke-linecap%3A%20butt%3B%20stroke-dashoffset%3A%200%3B%20stroke-linejoin%3A%20miter%3B%20stroke-miterlimit%3A%204%3B%20fill%3A%20rgb%280%2C0%2C0%29%3B%20fill-rule%3A%20nonzero%3B%20opacity%3A%201%3B%20white-space%3A%20pre%3B%22%20%3E%3Ctspan%20x%3D%22-267.45%22%20y%3D%2212.57%22%20style%3D%22font-family%3A%20%27Open%20Sans%27%2C%20sans-serif%3B%20font-weight%3A%20bold%3B%20fill%3A%20rgb%28255%2C255%2C255%29%3B%20white-space%3A%20pre%3B%20%22%3ELet%26apos%3Bs%20Test%20some%20TEXT%20HERE%20%3C%2Ftspan%3E%3C%2Ftext%3E%0D%0A%3C%2Fg%3E%0D%0A%3Cg%20transform%3D%22matrix%281%200%200%201%20254%20605.67%29%22%20style%3D%22%22%20%20%3E%0D%0A%09%09%3Ctext%20xml%3Aspace%3D%22preserve%22%20font-family%3D%22%27Open%20Sans%27%2C%20sans-serif%22%20font-size%3D%2218%22%20font-style%3D%22normal%22%20font-weight%3D%22normal%22%20style%3D%22stroke%3A%20none%3B%20stroke-width%3A%201%3B%20stroke-dasharray%3A%20none%3B%20stroke-linecap%3A%20butt%3B%20stroke-dashoffset%3A%200%3B%20stroke-linejoin%3A%20miter%3B%20stroke-miterlimit%3A%204%3B%20fill%3A%20rgb%28251%2C248%2C248%29%3B%20fill-rule%3A%20nonzero%3B%20opacity%3A%201%3B%20white-space%3A%20pre%3B%22%20%3E%3Ctspan%20x%3D%22-167.5%22%20y%3D%225.65%22%20style%3D%22fill%3A%20rgb%2837%2C176%2C37%29%3B%20white-space%3A%20pre%3B%20%22%3EOr%20here%20%3C%2Ftspan%3E%3C%2Ftext%3E%0D%0A%3C%2Fg%3E%0D%0A%3Cg%20transform%3D%22matrix%281%200%200%201%201382%20704.5%29%22%20style%3D%22%22%20%20%3E%0D%0A%09%09%3Ctext%20xml%3Aspace%3D%22preserve%22%20font-family%3D%22%27Open%20Sans%27%2C%20sans-serif%22%20font-size%3D%2223%22%20font-style%3D%22normal%22%20font-weight%3D%22normal%22%20style%3D%22stroke%3A%20none%3B%20stroke-width%3A%201%3B%20stroke-dasharray%3A%20none%3B%20stroke-linecap%3A%20butt%3B%20stroke-dashoffset%3A%200%3B%20stroke-linejoin%3A%20miter%3B%20stroke-miterlimit%3A%204%3B%20fill%3A%20rgb%28196%2C29%2C29%29%3B%20fill-rule%3A%20nonzero%3B%20opacity%3A%201%3B%20white-space%3A%20pre%3B%22%20%3E%3Ctspan%20x%3D%22-148.5%22%20y%3D%227.23%22%20%3EOr%20Maybe%20out%20there%3C%2Ftspan%3E%3C%2Ftext%3E%0D%0A%3C%2Fg%3E%0D%0A%3C%2Fsvg%3E">
</div>here is the code of that second SVG holdin texts :
<svg width="1919" height="963" xmlns="http://www.w3.org/2000/svg" >
<rect x="0" y="0" width="1919" height="963" fill="rgba(0, 0, 0, 0)"></rect>
<g transform="matrix(1 0 0 1 928.5 290.1)" style="" >
<text xml:space="preserve" font-family="'Open Sans', sans-serif" font-size="40" font-style="normal" font-weight="normal" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1; white-space: pre;" ><tspan x="-267.45" y="12.57" style="font-family: 'Open Sans', sans-serif; font-weight: bold; fill: rgb(255,255,255); white-space: pre; ">Let's Test some TEXT HERE </tspan></text>
</g>
<g transform="matrix(1 0 0 1 254 605.67)" style="" >
<text xml:space="preserve" font-family="'Open Sans', sans-serif" font-size="18" font-style="normal" font-weight="normal" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(251,248,248); fill-rule: nonzero; opacity: 1; white-space: pre;" ><tspan x="-167.5" y="5.65" style="fill: rgb(37,176,37); white-space: pre; ">Or here </tspan></text>
</g>
<g transform="matrix(1 0 0 1 1382 704.5)" style="" >
<text xml:space="preserve" font-family="'Open Sans', sans-serif" font-size="23" font-style="normal" font-weight="normal" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(196,29,29); fill-rule: nonzero; opacity: 1; white-space: pre;" ><tspan x="-148.5" y="7.23" >Or Maybe out there</tspan></text>
</g>
</svg>
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;
}<div>
<img src="data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D%221919%22%20height%3D%22963%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20style%3D%22%0D%0Adisplay%3Ablock%3B%0D%0Awidth%3A1963px%3B%0D%0Aheight%3A963px%3B%0D%0Abackground%3A%20linear-gradient%2876.5deg%2C%20transparent%2040.25%25%2C%20white%2040.5%25%29%2C%20linear-gradient%2815.5deg%2C%20transparent%2064.5%25%2C%20white%2065%25%29%2Clinear-gradient%2815deg%2Ctransparent%2020%25%20%2C%20rgb%28101%2C%20221%2C%20137%29%2060%25%29%3B%22%3E%0D%0A%20%20%3Crect%20width%3D%221919%22%20height%3D%22963%22%20x%3D%220%22%20y%3D%220%22%20fill%3D%22transparent%22%20%2F%3E%0D%0A%3C%2Fsvg%3E">
<img src="https://i.stack.imgur.com/YwLqP.jpg">
<svg viewbox="0 0 1919 963" xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="1919" height="963" fill="rgba(0, 0, 0, 0)"></rect>
<g transform="matrix(1 0 0 1 928.5 290.1)" style="" >
<text xml:space="preserve" font-family="'Open Sans', sans-serif" font-size="40" font-style="normal" font-weight="normal" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1; white-space: pre;" ><tspan x="-267.45" y="12.57" style="font-family: 'Open Sans', sans-serif; font-weight: bold; fill: rgb(255,255,255); white-space: pre; ">Let's Test some TEXT HERE </tspan></text>
</g>
<g transform="matrix(1 0 0 1 254 605.67)" style="" >
<text xml:space="preserve" font-family="'Open Sans', sans-serif" font-size="18" font-style="normal" font-weight="normal" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(251,248,248); fill-rule: nonzero; opacity: 1; white-space: pre;" ><tspan x="-167.5" y="5.65" style="fill: rgb(37,176,37); white-space: pre; ">Or here </tspan></text>
</g>
<g transform="matrix(1 0 0 1 1382 704.5)" style="" >
<text xml:space="preserve" font-family="'Open Sans', sans-serif" font-size="23" font-style="normal" font-weight="normal" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(196,29,29); fill-rule: nonzero; opacity: 1; white-space: pre;" ><tspan x="-148.5" y="7.23" >Or Maybe out there</tspan></text>
</g>
</svg>
</div>Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 |