Cover image wont display

Hello,this is my first post here.My name is Gints and I just picked up coding courses and am on first week.I have encountered an issue with my coursework and would like some help.I am supposed to make a page based on page construct from “spacey kappa vercel app”.I made a html and css parts but am unable to get my images to be displayed and cant get them to change as I scroll down,any help would be very much appreciated.

    <!DOCTYPE html>
    <html lang="en">
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="style.css">
        <div class="logo">
          <a href="#">Home</a>
          <a href="#">About</a>
          <a href="#">Contact</a>

        <div id="yourCustomDiv"> <!-- Add your custom ID here -->
          <!-- Add your content inside this div -->
          <section id="post1" class="feature">
            <div class="title">
              <h2>Featured Post</h2>
              <h1>How to make a splash page</h1>
              <a href="#">Read more</a>

        <!-- Add more sections or content as needed -->

      <script src="script.js"></script>

  body {
    margin: 0;
    font-family: 'Helvetica', sans-serif;
    background-image: url("");
    background-size: cover;
    background-position: center center;
    background-attachment: fixed; /* Fixed background */
    height: 100vh; /* Set the height to full viewport height */
    display: flex;
    flex-direction: column;

  header {
    padding: 500px; /* Add padding to header if needed */
    display: flex;
    justify-content: space-between;
    align-items: center;

  .logo {
    display: flex;
    align-items: center;

  .logo h1 {
    margin-right: 20px;
    color: #ff0000/* Adjust the margin as needed */

  nav {
    display: flex;
    align-items: center;

  nav a {
    color: #fb0404; /* Set text color to black */
    margin: 50px;
    margin-left: 50px;
    text-decoration: none;

  .feature {
    text-align: center;
    color: #f70808; /* Set text color to white */

  .feature h2 {
    font-size: 2em;
    padding: 500px;
    margin-bottom: 20px; /* Adjust margin as needed */

  .feature h1 {
    font-size: 3em;
    margin-bottom: 20px; /* Adjust margin as needed */

  a {
    color: #f20707;
    text-decoration: none;

````document.addEventListener('DOMContentLoaded', function () {
  const headers = document.querySelectorAll('header');
  const headerImages = [

  function changeHeader() {
    const scrollPosition = window.scrollY;
    const sectionHeight = document.querySelector('.feature').offsetHeight;

    const headerIndex = Math.floor(scrollPosition / sectionHeight);
    headers.forEach((header, index) => { = index === headerIndex ? headerImages[index] : 'none';

  document.addEventListener('scroll', changeHeader);

Hello and Welcome to the community @IfrigGin !

Just a small typing error in the link.

It should be styles.css.

We all have made this same mistake.

Wishing you good progress.



Can you please try to explain in simple terms what you are trying to do?

The background image array is in the header.
The function changeHeader has a scroll event aimed at a class in a section below the header?

Are you trying to change header or body background images on scroll?


Hi,I am trying to make background images scroll along with the headers.For example as I scroll down the page,the next background image scrolls up

Screenshot is from an example website.I do apologize for being vague and confusing my English is a little weak.


This one?

This is very easy to achieve, you don’t even need JavaScript.
Are you supposed to use JS for the course, that would be over-engineering?

Put three separate sections in your html, each with its own class.
Give them 100vh (100% viewport height) in the CSS
Give all three their individual background image

Scratch all your JavaScript, change HTML/CSS for now and re-post the new code after you tried for us to check out. Thanks.


By God kind Sir,thank you so much.My deadline is tonight and I was getting desperate.We are allowed to use JS but as you said it would just be to get any bonus points and I am happy with understanding what Im doing at the moment.You have my genuine gratitude for your time and help mr.Huebschmann.


Great it worked!

This is one of the cases where JavaScript would add unnecessary extra computation for a simple effect. You can say this in your course why you decided against using it.

1 Like