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">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>RaceY</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
      <header>
        <div class="logo">
          <h1>RACEY</h1>
        </div>
        <nav>
          <a href="#">Home</a>
          <a href="#">About</a>
          <a href="#">Contact</a>
        </nav>
      </header>

      <main>
        <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>
            </div>
          </section>
        </div>

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

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

  body {
    margin: 0;
    font-family: 'Helvetica', sans-serif;
    background-image: url("https://plus.unsplash.com/premium_photo-1683134242640-fe6baaf4d5fc?q=80&w=1895&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
    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 = [
    'url(https://plus.unsplash.com/premium_photo-1683134242640-fe6baaf4d5fc?q=80&w=1895&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D)',
    'url(https://images.unsplash.com/photo-1546768292-fb12f6c92568?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D)',
    'url(https://images.unsplash.com/photo-1610905376670-5e7e0e8a3cfb?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D)'
  ];

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

    const headerIndex = Math.floor(scrollPosition / sectionHeight);
    headers.forEach((header, index) => {
      header.style.backgroundImage = 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.

2 Likes

Hello!

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?

3 Likes

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.

2 Likes

https://spacey-kappa.vercel.app/

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.

3 Likes

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.

2 Likes

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