Cannot set up a background color for a wrapper

Hi everyone,

I’m trying to wrap up the entire page in a wrapper. However, when I apply background-color it does nothing even though other properties (margin, width) work on it. Also when I apply background color to the <body> element, it completely overwrites the wrapper background, I tried to solve it with z-index but it also doesn’t work. Any ideas what is happening here and why?

HTML looks like below

<body>
    <div class="wrapper">

    <--! rest of the content -->

    </div>
</body>

CSS:

body {
  font-family: "Lato", sans-serif;
  color: var(--dark-grey);
}

.wrapper {
  max-width: 1650px;
  width: 100%;
  margin: 0 auto;
/* --- does not work --- */
  background-color: var(--light-green);
}

Thank you!

I don’t see where your CSS variables are defined.

I was able to get this to work in this pen.

1 Like

Thank you @kevinSmith. It cannot be the variable name because I applied it to <body> and it works on this element. For some reason it takes no effect on the wrapper.

You can see here that the wrapper takes over the green color from body even though it has a separate background color assigned, none color works on this element.

https://annaxt.github.io/product_landing_page/plant_store.html

I’ve been trying to figure it out the entire evening but still have no idea why :woman_shrugging:

The div wrapper is the next element after the <body>.

HTML below but I don’t think this would help anyone.

OK,

So, I think it is working, we just can’t see it. For example, if I add border: 10px solid red; to the “wrapper”, I see:

Screen Shot 2021-08-21 at 11.03.08 AM

Notice the little red there hidden by the banner?

That tells me that:

  1. Changes we make to it are being reflected.
  2. It has 0 height so we can’t see it.

Why does it have 0 height. Imagine we had a plastic bag. When there is nothing in it, it is flat. It won’t expand until we put something in it.

You do have things in them, but a lot of them you seem to be giving things like position: fixed and position: absolute which are messing with the flow of the DOM. So, that div is not taking up any vertical space because there is nothing in there requiring vertical space.

At least that is what I can best figure out.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.