CSS Background Changed on Me

I’m working on the Tea Cozy Project in the Web Development Skill path: https://www.codecademy.com/paths/learn-how-to-build-websites/tracks/advanced-css-flexbox-and-animations/modules/layout-with-flexbox/projects/tea-cozy

Everything seemed to be running fine as the project was going on, and then at some point I noticed that the background stopped being as black as it was:

As you can see, the divs have the black background, but the main html went a little lighter. I’m not sure what I did in the process to make it change, but after looking at the dev tools on chrome, I noticed that the code looks like it might not be running or something. Is something overriding the code? Here is a photo from my dev tools:
Screenshot from 2021-05-21 23-12-54

I will post my code if that helps:

HTML

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="./resources/css/index.css">
    <title>Tea Cozy Project</title>
  </head>
  <body>
    <header>
      <img id="logo" src="./resources/images/logo.webp" alt="Company Logo">
      <nav>
        <ul>
          <li>Mission</li>
          <li>Featured Tea</li>
          <li>Locations</li>
        </ul>
      </nav>
    </header>
    <section id="mission">
      <div class="title">
        <h2>Our Mission</h2>
        <h4>Handpicked, Artisinally Created, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
      </div>
    </section>
    <section id="teas">
      <div class="title">
        <h2>Tea of the Month</h2>
        <h4>What's Steeping at Tea Cozy?</h4>
      </div>
      <div class="gallery">
        <div class="caption">
          <img src="./resources/images/berryblitz.webp" alt="Tea with Berries Floating on Top">
          <h4>Fall Berry Blitz Tea</h4>
        </div>
        <div class="caption">
          <img src="./resources/images/spiced-rum.webp" alt="Photo of Spices">
          <h4>Spiced Rum Tea</h4>
        </div>
        <div class="caption">
          <img src="./resources/images/donut.webp" alt="Powdered Donut">
          <h4>Seasonal Donuts</h4>
        </div>
        <div class="caption">
          <img src="./resources/images/myrtle-ave.webp" alt="Myrtle Ave">
          <h4>Myrtle Ave Tea</h4>
        </div>
        <div class="caption">
          <img src="./resources/images/bedford-bizarre.webp" alt="Strange Looking Tea">
          <h4>Bedford Bizzare Tea</h4>
        </div>
      </div>
    </section>
  </body>
</html>

CSS

html {
    font-family: 'Helvetica', sans-serif;
    font-size: 22px;
    color: seashell;
    background-color: black;
    opacity: 0.9;
    text-align: center;
}

header {
    background-color: black;
    border-bottom: 1px solid seashell;
    position: fixed;
    height: 3.1363636363636362rem;
    width: 100%;
    display: flex;
    justify-content: flex-end;
    flex-direction: row;
    z-index: 1;
}

header #logo {
    height: 50px;
    width: auto;
    padding-left: 0.45rem;
    display: inline-block;
    margin-right: auto;
}

nav ul {
    list-style: none;
    text-decoration: underline;
    display: flex;
}

nav ul li {
    padding-right: 1rem;
}

@media only screen and (max-width: 575px) {

    header {
        justify-content: center;
    }

    header #logo {
        display: none;
    }
}

#mission {
    background-image: url(../images/mission-background.webp);
    background-size: cover;
    background-position: center;
    margin: 0 auto;
    height: 31.81rem;
    max-width: 54.54rem;
    top: 3.1363636363636362rem;
    position: relative;
    display: flex;

}

.title {
    background-color: black;
    width: 100%;
    height: fit-content;
    align-self: center;
    display: flex;
    flex-direction: column;
}

.title h2 {
    font-weight: bold;
    margin-bottom: 0;
    margin-top: 0.75rem;
}

.title h4 {
    font-weight: bold;
    margin-bottom: 0.75rem;
    margin-top: 0.75rem;
}

#teas {
    margin: 0 auto;
    padding-top: 3.1363636363636362rem;
}

.gallery {
    background-color: black;
    padding-top: 3.1363636363636362rem;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
    width: 45.45rem;
    margin: auto;
}

.gallery .caption {
    display: flex;
    flex-direction: column;
}

.gallery img {
    height: 9.09rem;
    width: 11.63rem;
}

As I was making this post, I took the opacity rule away from the html tag, and everything seems to be working fine, but the design spec on the project page asked me to use the opacity rule. I just thought it looked funny I guess. Updated question: Why did the page page remain completely black until I added the last flexbox container I created, and what made it change?

Hi @student31cs
if you put the opacity on the same element as the initial black background, the default white background shines through. Therefore I assume that the opacity should be on a child element of the element that has the background color. Which element should be transparent?

It is not a good practice to apply these styles directly to the HTML. Better move the styles which are currently on the HTML element to the body tag.
Could you specify what you mean by this:

Or is everything solved already?

2 Likes

Thank you.

What I mean is that while I was building the site, the entire background was always pitch black, up until I added the .Gallery flexbox. Once I added that flexbox, the background was not as black anymore, and I don’t understand why

That’ll be fixed once you moved the styles from the HTML to the body, I think.

1 Like

@mirja_t Thank you :slight_smile:

1 Like