I can't figure out why my background image is being removed especially since I can see using inspect element in the browser that the div has a height and a width encompassing pretty much the whole page.
The error is in .full-height where switching the position from relative to absolute causes the image to disappear. I was also curious as to how to flip the orientation of the image background.
* {
font-family: "Poppins", sans-serif;
margin: 0;
padding: 0;
}
:root {
--primary-color: #0f9d58;
--background-color: #f0f3f7;
--secon-color: #9da2ad;
--grey: #7a7a7b;
--white: #ffffff; /*shortcuts*/
}
a {
color: unset;
text-decoration: none;
}
body,
html {
background-color: var(--background-color);
scroll-behavior: smooth;
position: relative;
overflow: hidden;
}
.nav {
position: fixed;
top: 0;
left: 0;
width: 100%; /*height 100% would mean the viewport*/
z-index: 99;
background: var(--background-color);
box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}
.menu-wrap {
max-width: 1366px;
margin: auto;
display: flex;
justify-content: space-around;
align-items: center;
padding: 1rem;
}
.menu div {
display: inline-block;
padding: 8px 20px;
}
.logo {
font-size: 2rem;
font-weight: 800;
color: var(--primary-color);
}
.menu-item {
margin-left: 1rem;
font-weight: 600;
color: var(--grey);
transition: 0.5s ease-in-out; /*this reflects a state change*/
cursor: pointer;
}
.menu-item:hover,
.menu-item.active {
color: var(--white);
background-color: var(--primary-color);
border-radius: 1rem;
}
.cart-btn {
width: 3rem;
height: 3rem;
display: flex;
align-items: center;
justify-content: center;
color: #0f9d58;
font-size: 2rem;
cursor: pointer;
transition: 0.5s ease-in-out;
}
.cart-btn:hover {
background-color: #0f9d58;
color: var(--white);
border-radius: 1rem;
}
.fullheight {
height: 100vh;
position: relative;
width: 100%;
}
.align-items-center {
display: flex;
align-items: center;
justify-content: center;
}
.bg-img {
background-position: center;
background-size: cover;
background-repeat: no-repeat;
background-image: url(images/main.jpg);
}
.bg-img-fixed {
background-attachment: fixed; /*The background-attachment CSS property sets whether a background image's position is fixed within the viewport, or scrolls with its containing block CHECK*/
}
.container {
width: 100%;
max-width: 1366px;
margin: 0 auto;
}
/*grid system*/
.row {
display: flex;
flex-wrap: wrap;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,300;0,400;0,600;0,700;0,800;1,900&display=swap"
rel="stylesheet"
/>
<link
href="https://unpkg.com/[email protected]/css/boxicons.min.css"
rel="stylesheet"
/>
<title>Fresh Food</title>
</head>
<body>
<div class="container">
<div class="nav">
<div class="menu-wrap">
<a href="#home">
<div class="logo">FRESHFOOD</div>
</a>
<div class="menu">
<a href="#home">
<div class="menu-item active">Home</div>
</a>
<a href="#about">
<div class="menu-item">About</div>
</a>
<a href="#menu">
<div class="menu-item">Menu</div>
</a>
<a href="#testimonial">
<div class="menu-item">Testimonials</div>
</a>
</div>
<div class="right-menu">
<div class="cart-btn">
<i class="bx bx-cart-alt"></i>
</div>
</div>
</div>
</div>
<div
class="fullheight align-items-center bg-img bg-img-fixed"
id="home"
></div>
</div>
</body>
</html>
question from:
https://stackoverflow.com/questions/66046986/position-absolute-makes-the-background-image-disappear-and-im-not-sure-why 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
