I have created two layers on top of an image: one is a filter that darkens the image, and the other contains random text. I want to align them to the image with the same width and height but I'm not sure how to achieve that. I attempted to use background-image: url('...') in CSS but it did not work as expected.
When adjusting the browser window size, the alignment does not stay consistent. The layers are fixed at 632px width and height, and I am unsure how to make their height relative to the image height.
html {
scroll-behavior: smooth;
}
body {
background: #fff;
font-family: 'Lato', sans-serif;
}
header {
background: #eee;
width: 100%;
height: 100px;
}
ul {
background: #eee !important;
}
header a {
text-decoration: none;
color: white;
}
header ul {
list-style-type: none;
}
ul {
background: #fff;
margin-top: 10px;
display: flex;
font-size: 85%;
width: 100%;
padding-left: 0;
}
ul>li {
display: flex;
justify-content: center;
align-items: center;
}
a {
outline: none;
}
p {
font-size: 115%;
}
/*header a*/
.nav-item a {
display: inline-block;
color: black;
width: 200px;
padding: 25px 0px;
text-align: center;
}
.nav-item a:hover {
text-decoration: none;
color: #000000 !important;
background: #d1de4c;
}
.header-container {
padding-top: 6px;
}
.container-fluid {
padding-left: 0;
}
.presentation {
width: 100%;
height: 632px;
}
.img-content {
z-index: 2;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.img-filtr {
z-index: 1;
background: black;
opacity: 0.45;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.nav-item.active>a {
color: #d1de4c;
}
.col-12 {
padding-right: 0;
}<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Lato:400,400i,700&subset=latin-ext" rel="stylesheet">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
<body id="home" data-target=".navigation" data-offset="0" data-spy="scroll">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<header class="header-container sticky-top">
<nav class="navbar navbar-expand-lg">
<a class="navbar-brand" href="#home"><img src="https://i.sstatic.net/Fzk7J.png" class="img-fluid"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#home">STRONA GŁÓWNA <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#firma">O FIRMIE</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#oferta">OFERTA</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#etapy">ETAPY SPRZĄTANIA</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#opinie">OPINIE</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#kontakt">KONTAKT</a>
</li>
</ul>
</div>
</nav>
</header>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="presentation">
<div class="img-content">Some text, styling not finished</div>
<div class="img-filtr"></div>
<img style="z-index:0;" src="https://i.sstatic.net/PNDW6.jpg" class="img-fluid img-in-placeholder">
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>On full screen, the text and filter layers may not align perfectly: https://i.sstatic.net/jlaiE.jpg
Adjusting the window aspect ratio can further distort the alignment: https://i.sstatic.net/UtOyL.jpg