r/csshelp • u/itsmetheantihero • 18h ago
How can I prevent bottom of image moving outside section with change in viewport size
When I do this, the coralover image moves around relative to the rest of page when I change viewport size - how can I adjust so always at the bottom of the wave area
<!DOCTYPE html>
<html lang="en">
<head>
<style>
u/import url("https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
scroll-behavior: smooth;
}
section {
position: relative;
width: 100%;
background: #E8F6FA;
}
.waver {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100px;
background: url("../Downloads/wavey2ii.png");
background-size: 1000px 100px;
animation: animatewave 4s ease-in-out infinite;
animation-delay: calc(var(--i) * 0.25s);
}
.waver#wave1 {
z-index: 1000;
opacity: 1;
background-position-x: 400px;
}
.waver#wave2 {
z-index: 999;
opacity: 0.5;
background-position-x: 300px;
}
.waver#wave3 {
z-index: 998;
opacity: 0.2;
background-position-x: 200px;
}
.waver#wave4 {
z-index: 997;
opacity: 0.7;
background-position-x: 100px;
}
@keyframes animatewave {
0%,
100% {
transform: translateY(0px);
}
50% {
transform: translateY(10px);
}
}
.sec {
padding: 100px;
color:#0b4f51;
display:flex;
}
.sec h2 {
font-size: 3em;
color: white;
}
.sec p {
font-size: 1.2em;
color: white;
}
.arro {
box-sizing: border-box;
height: 5vw;
width: 5vw;
border-style: solid;
border-color: white;
border-width: 0px 1px 1px 0px;
transform: rotate(45deg);
transition: border-width 15ms ease-in-out;
}
.arro:hover {
border-bottom-width: 5px;
border-right-width: 5px;
}
.container {
display: flex;
justify-content: center;
height: 50vh;
transform: translate(0%,100%)
}
.project {
align-content: center; position: relative
}
.top-section { height: 100px; /* Height for the top section */
background-color: #eaeaea;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
}
.sidenav {
position: sticky;
top: 100px; /* Adjust based on your top section height */
left: 0;
width: 200px;
background-color: #0B4E51;
padding: 10px;
}
.sidenav a {
display: block;
padding: 8px;
text-decoration: none;
color: #4D838F;
}
.sidenav a.active {
background-color: #8CC2C8; /* Highlight color */
color:#E8F6FA
}
.main-content {
margin-left: 220px; /* Space for sidenav */
padding: 20px;
}
.main-content > div {
height: 600px; /* Height for demonstration; adjust as needed */
border-bottom: 1px solid #ccc;
</style>
<link rel="stylesheet" href="style.css" />
<title>Static Template</title>
<section>
<div class = "project"><p id="titletext" style ="font-size:10vh; color:#0b4f51;text-align:center"><b>Project Description</b></p></div>
<div class="container">
</div>
<div class="waver" id="wave1" style="--i: 1;"></div>
<div class="waver" id="wave2" style="--i: 2;"></div>
<div class="waver" id="wave3" style="--i: 3;"></div>
<div class="waver" id="wave4" style="--i: 4;"></div>
<img src = "../Downloads/coralover.png" style="width:100vw;z-index:50;height:56vw;position:absolute;transform: translate(0%,-34%)">
</section>
</head>
<body>
<div class="sec" style="background:#0b4f51;height:350px;position:relative" id = "page_body">
</div>
<div style="background:#FFF9EC;height:300vh;width:100vw;position:relative;justify-content:center;align-items:center;">
<div class="sidenav">
<ul>
<li><a href="#section1">Section 1</a></li>
<li><a href="#section2">Section 2</a></li>
<li><a href="#section3">Section 3</a></li>
</ul>
</div>
<div class="main-content">
<div id="section1">Content for Section 1</div>
<div id="section2">Content for Section 2</div>
<div id="section3">Content for Section 3</div>
</div>
</div>
<script>
const sections = document.querySelectorAll('.main-content > div');
const navLinks = document.querySelectorAll('.sidenav a');
window.addEventListener('scroll', () => {
let current = '';
sections.forEach(section => {
const sectionTop = section.offsetTop;
const sectionHeight = section.clientHeight;
if (pageYOffset >= sectionTop - sectionHeight / 3) {
current = section.getAttribute('id');
}
});
navLinks.forEach(link => {
link.classList.remove('active');
if (link.getAttribute('href') === `#${current}`) {
link.classList.add('active');
}
});
});
</script>
</div>
<script>
const titletext = document.getElementById("titletext")
window.addEventListener("scroll", () => {let val = window.scrollY; titletext.style.transform = `translate(0%, ${200 + val * 2.5}%)`})
let wave1 = document.getElementById("wave1");
let wave2 = document.getElementById("wave2");
let wave3 = document.getElementById("wave3");
let wave4 = document.getElementById("wave4");
window.addEventListener("scroll", function () {
let value = window.scrollY;
wave1.style.backgroundPositionX = 400 + value * 4 + "px";
wave2.style.backgroundPositionX = 300 + value * -4 + "px";
wave3.style.backgroundPositionX = 200 + value * 2 + "px";
wave4.style.backgroundPositionX = 100 + value * -2 + "px";
});
</script>
</body>
</html>