CODEWITHSUNDEEP
csscolors
Iggy
Iggy

Reputation: 5251

How to isolate page and div background colors in CSS?

I am creating a login form but I could not get the BG color to work the way I wanted.

I want the page to have an overall background color of teal (#00CEB9). I created a form with a different background (let's just say red for demo), but the teal is still displayed inside the box.

image with polluted BG

I want the box to have 100% red background like this (while keeping the teal background on the rest of the page):

image with isolated BG

<div class="login-container">
  <form>
    <label for="login">Login</label>
    <input type="text" id="login">
    <label for="password">Password</label>
    <input type="text" id="password">
  </form>
</div>

CSS

html *{
  background-color: #00CEB9;
}

.login-container {
    margin: 8px auto;
    border: 3px solid #f1f1f1;
    padding: 8px;
    border-radius: 4px;
    width: 30%;
    text-align: center;
    background-color: red;
}

How can I keep my page background color and have a form box with its own background color without having them pollute each other?

Upvotes: 0

Views: 181

Answers (4)

Tajveer Singh Nijjar
Tajveer Singh Nijjar

Reputation: 535

Remove * from the first line of code in css. What * is doing is that it makes background color of everything #00CEB9. That is why you are viewing the background color of form and every textbox as #00CEB9. I hope this helps

Upvotes: 1

Dekel
Dekel

Reputation: 62596

html * means every element inside the html element, and this is not exactly exactly you are looking for.

You can use 

html,  body {
    background-color: #00CEB9;
}

Instead

Upvotes: 1

Goontracker
Goontracker

Reputation: 234

The issue is with your css file. You are basically assigning background-color: teal to all the html elements because of the *.

Change the css to :

html {
  background-color: #00CEB9;
}

Upvotes: 0

Matt Davis
Matt Davis

Reputation: 470

Try changing your CSS from:

html *{
  background-color: #00CEB9;
}

to 

html, body {
  background-color: #00CEB9;
}

By applying it to html * you're applying it to all elements that don't have a background colour already assigned.

See CSS Selectors Reference for more information on how to drill down on CSS selectors.

Upvotes: 1

Related Questions