I am trying to clone netflix UI but getting error while applying the background image with its position as absolute with top:0. I have attached both html and css codes. Please help me out in identifying the issue.
I have already given relative position to parent-container.
*{
margin: 0;
padding: 0;
}
.parent-container{
position: relative;
height: 120vh;
width: auto;
}
/* header nav .logo{
position: absolute;
top: 0;
} */
.frontPage{
background-image: url('images/background.jpg');
background-position: center center;
background-repeat: no-repeat;
background-size: max(1500px,100%);
filter: brightness(0.5);
width: auto;
height: 110vh;
position: absolute;
top: 0;
left: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Clone - Netflix</title>
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<div class="parent-container">
<header>
<nav>
<div class="logo">
<img src="images/netflix-icon.svg" alt="Netflix icon">
</div>
</nav>
</header>
<div class="frontPage">
</div>
</div>
<footer>
</footer>
</body>
</html>
3
Answers
You need to give
.frontPage
a width other thanauto
. Either setwidth: 100%
or setright: 0
The problem is that you are setting
width: auto
. When thediv
element has noposition
attribute defined, it will take up 100% of its container due to its default of block display styling. However, when you addposition: absolute
, it no longer has a basis for its width and the width will shrink to 0.You can see in this snippet that the red rectangle shows, while the blue cannot be seen.
You need to add a width (ex 100vw) to your .frontPage class and also set z-index to -1 to show your logo above