Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Kieron Atkinson
Kieron Atkinson
2,461 Points
Posted by Kieron Atkinson
Kieron Atkinson
2,461 Points

I can't separate control between the text and the background color of my header, how would the code look?

I'm playing around with the techniques I have learned in this track, i have made a little notes website in dreamweaver, storing handy little notes as list items as I learn new ting about HTML & CSS, I'm having difficulty controlling, the opacity of the background in the header whilst retaining the texts opacity as 1 meaning there would be no transparency in the text but there would be transparency in the background of the header so it would blend better and make the text pop. my html looks like this:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Notes Website</title>
<link href="notes.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
</head>
<header>
    <div class="Title_Section">
        <h1 class="first-title">Notes</h1>
        <h2 class="second-title">All of my notes during the course I'm taking with Treehouse</h2>
    </div>
</header>
<body>
    <div class="List_Section">
        <ul>
            <li>IMG tags don't have to be closed.</li>
            <li>div tags groups together lines of code allowing me to apply the same attrivutes to multiple things in CSS.</li>
            <li>href arguments within the link tag allows ne to call elements from otherpages and give them a relationship within the HTML.</li>


        </ul>

    </div>
</body>
</html>

CSS as follows: ```CSS /* CSS Document */ header { text-align: center; font-family: 'Montserrat', sans-serif; color: white;

} .Title_Section { background:#3E8; border: solid #925; border-radius: 50px; padding: 10px; opacity: .8; } body { background: #000000;

} .List_Section { color: white; font-family: 'Montserrat', sans-serif; margin-top: 30px; border: 5px solid white; border-radius: 10%;

} h1 { opacity: 1; } '''

2 Answers

Chris Evergreen
Chris Evergreen
2,857 Points
Chris Evergreen
Chris Evergreen
2,857 Points

Just A Tip

Hello, have you tried using rgba(r, g, b, a) instead of hexadecimal values? The "a" (alpha) would give you control over the opacity of the object, while "r, g, b" (red, green, blue) would apply the color. You can convert through any online converter. This would give you the ability to change the opacity of the background without influencing the color of the text. You can through opacity out the window until you ever need to change the opacity of the whole thing.

So, let's take an example, such as the following:

background: #3E8;

It would translate into:

background: rgba(51, 238, 136, 1);

Change the last digit into a value between 0 and 1, and voilà, you've changed the opacity for only the background.

Best of luck!

Kieron Atkinson
Kieron Atkinson
2,461 Points
Kieron Atkinson
Kieron Atkinson
2,461 Points

Thanks!! when doesn't RGB make things better :P haha

Shawn Rieger
Shawn Rieger
9,916 Points
Shawn Rieger
Shawn Rieger
9,916 Points

This is how CSS is supposed to work. Applying certain settings to a parent will fall-through to all the children elements, this includes opacity. I'd recommend using rgba() to set the background color with opacity instead of setting opacity directly on the parent.

header {
  /* black background at 50% opacity */
  background-color: rgba(0, 0, 0, 0.5);
}
Kieron Atkinson
Kieron Atkinson
2,461 Points
Kieron Atkinson
Kieron Atkinson
2,461 Points

Thanks1 I'll experiment with this!