Foreground vs Background 2/9


#1

Next, set the background color of the heading to Aqua.

Notice that the background-color property did not change the background color of the entire page. Instead, only the background area behind heading changed. We'll learn why this occurs in more detail later in the course.

Note: The background color of the heading is blocking the image of the coffee, so let's remove it. Remove the background color of the main heading.

PLEASE HELP FAST
WHAT DID I DO WRONG

WHERE DO I PUT THE AQUA BACKGROUND?

body {
  padding: 0;
  margin: 0;
  background: #f7f7f7;
  /* Old browsers */
  background: -moz-linear-gradient(45deg, #f7f7f7 0%, #EAE0D5 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(45deg, #f7f7f7 0%, #EAE0D5 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(45deg, #f7f7f7 0%, #EAE0D5 100%);
}

/** Header styles **/

.header {
  background-image: url("https://s3.amazonaws.com/codecademy-content/courses/web-101/unit-4/htmlcss1-img_coffee-bgnd.jpeg");
  height: 400px;
  color: MidnightBlue;
  background-position: center center;
}

h1 {
  
  
  font-family: 'Covered By Your Grace', sans-serif;
  font-size: 100px;
  line-height: 76px;
  margin: 0;
  position: relative;
  text-align: center;
  top: 20%;
}

/** List style **/

h2 {
  color: #E4BB97;
  font-family: 'Raleway', sans-serif;
  font-size: 28px;
  font-weight: 500;
  text-align: left;
  text-transform: uppercase;
}

ul {
  margin: 0 auto;
  padding: 0;
  width: 50%;
}

li {
  border-bottom: 1px solid #E4BB97;
  list-style: none;
  margin: 100px 0px;
  padding-bottom: 60px;
}

p {
  color: #444444;
  line-height: 32px;
  font-family: 'Raleway', sans-serif;
  font-size: 20px;
  font-weight: 100;
}

a {
  color: #214E34;
  font-family: 'Raleway', sans-serif;
  font-size: 13px;
  font-weight: 900;
  text-align: left;
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 2px;
}

#2

You are to use the background-color property in the h1 selector.

h1 {
  background-color: Aqua;
}

#4

Please help...

I am having trouble with the first instruction. Where it says make the main heading color midnight blue?

I have said

h1 {
color: MidnightBlue:
}
It won't work??

I've tried doing it exactly as you have in your post in the question, still won't accept it?


#5

Take a look at his code again.

your : vs his ;

:slight_smile:


#6

2.

Next, set the background color of the heading to Aqua.
similar to the foreground color