Is it possible to make the #home section fixed to the background while scrolling, including all the texts and buttons? I envision it like having texts embedded in an image. The text is located in the middle left of the page (let's keep this as default without any changes).
**
I just want the texts and the button (home__container) to remain fixed in position, so that when scrolled they stay in place while the other sections scroll over them**
<html>
<head>
<link rel="stylesheet" href="style.css">
<title>CHANEL Copy Website</title>
</head>
<body>
<main>
<section id="home" style="height: 90vh;">
<div class="home__container">
<h1>Timeless Elegance</h1>
<h4>Shop Now</h4>
<button>Explore</button>
<button>Shop Collections</button>
</div>
</section>
<section #other-section>
</section>
</main>
</body>
</html>
@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--black: #161413;
--white: #FFFFFF;
--dark-gray: #444444;
--light-gray: #E7E7E7;
}
body {
font-family: 'Open Sans', sans-serif;
font-weight: 600;
color: var(--black);
background-color: var(--white);
width: 100%;
}
section {
padding: 24px 16px;
display: flex;
align-items: center;
width: 100vw;
max-width: 100%;
}
/* home */
#home {
height: 90vh;
align-items: center;
background-repeat: no-repeat;
background-size: cover;
background-image: url('assets/brand-home-bg-image.avif');
color: var(--white);
width: 100vw;
max-width: 100%;
background-attachment: fixed;
}
.home__container {
margin-top: 2.5rem;
margin-left: 1.5rem;
}
.home__container h2 {
color: #f9f7f4;
}
.home__container button {
margin-top: 1.5rem;
margin-right: 1rem;
}
/* Other Section */
#other-section {
position: relative;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
I attempted using position fixed, z-index, and even incorporated javascript with gpt, but unfortunately it didn't yield the desired outcome!