2-Layer Method For Image Overlays For Translucent Coloring

HTML & CSS
13

Hi there Chris77,

we are not tied to just using percentage values. :mask:

Fixed values can also be employed and then, at
strategic positions, the values can be changed. :sunglasses:

Here is a one possible scenario…

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>untitled document</title>
<!--<link rel="stylesheet" href="screen.css" media="screen">-->
<style media="screen">
.element-with-background-image {
    width: 48em;
    padding-top: 36em;
    margin: auto;
    background: linear-gradient(rgba(255, 0, 0, 0.1), rgba(255, 0, 0, 0.6)),
                url(https://upload.wikimedia.org/wikipedia/commons/1/1d/Martinique_Beach_%28Salines%29.jpg);
    background-size: 100% auto;
 }
@media screen and (max-width: 50em) {
.element-with-background-image {
    width: 40em;
    padding-top: 30em;
  }
 }
@media screen and (max-width: 42em) {
.element-with-background-image {
    width: 32em;
    padding-top: 24em;
  }
 }
@media screen and (max-width: 34em) {
.element-with-background-image {
    width: 24em;
    padding-top: 18em;
  }
 }
@media screen and (max-width: 26em) {
.element-with-background-image {
    width: 16em;
    padding-top: 12em;
  }
 }
</style>
</head>
<body>
 <div class="element-with-background-image"></div>
</body>
</html>

coothead

1 Like