Learn HTML CSS Background:Shorthand 7


#1

https://codecademy.com/courses/learn-html-css/lessons/adding-images/exercises/background-shorthand?action=lesson_resume

Error message says "Did you use the shorthand background property?" I abbreviated every background item that I see on this but I still keep getting the error. If someone could correct what I'm doing wrong I'd greatly appreciate it.


body {
  background-color: #FFF;
  margin: 0;
  padding: 0;
}

#cover {
  height: 900px;
  position: relative;
  top: -55px;
  width: 100%;
  background: url(https://larryfire.files.wordpress.com/2012/06/godfather_mn_gb_print.jpg) no-repeat center;
 
}

.navigation {
  background-color: rgba(255, 255, 255, 0.5);
  overflow-y: auto;
  position: fixed;
  left: 0;
  top: 0;
  text-align: center;
  width: 100%;
  z-index: 10000;
}

ul {
  padding: 0;
}

li {
  color: #14213D;
  display: inline-block;
  font-family: 'Abel', sans-serif;
  font-size: 16px;
  font-weight: 300;
  margin: 16px 20px;
  text-transform: uppercase;
}

#logo {
  color: Red;
  font-family: 'Amatic SC', cursive;
  font-size: 32px;
  padding: 0px 50px;
}

.cover-content {
  box-sizing: border-box;
  margin: 0 auto;
  position: relative;
  text-align: center;
  top: 280px;
  width: 70%;
}

h1 {
  color: #FFF;
  font-family: 'Amatic SC', cursive;
  font-size: 72px;
  line-height: 60px;
  padding: 20px 10px;
  text-align: center;
}

h2 {
  color: Gold;
  font-family: 'Futura', sans-serif;
  font-size: 42px;
  font-weight: 300;
  text-align: center;
}

h3 {
  color: #14213D;
  font-family: 'Abel', sans-serif;
  font-size: 28px;
  text-align: center;
  text-transform: uppercase;
}

h4 {
  color: Red;
  font-family: 'Abel', sans-serif;
  font-size: 24px;
  margin: 0px 0px 50px 0px;
}

p {
  color: #333;
  font-family: 'Raleway', sans-serif;
  font-size: 16px;
  font-weight: 300;
}

a {
  text-decoration: none;
}

.btn {
  background-color: Red;
  color: #FFF;
  font-family: 'Amatic SC', cursive;
  font-size: 26px;
  padding: 14px;
}

.products {
  background: #EEEFF1;
  box-sizing: border-box;
  width: 90%;
  margin: 20px auto;
  padding: 20px 0px;
  text-align: center;
}

.product {
  display: inline-block;
  margin: 0px 2% 80px 2%;
  text-align: center;
  width: 45%;
}

.product img {
  width: 100%;
}

.blue {
  color: #14213D !important;
}


#2

It may be related to your code not updating in the interface. The workaround that I've been using until this problem is addressed is write code from step instructions, click Run, refresh the page, click Run again is step is not check marked.


#3

I tried this and it still didn't work :confused:


#4

Until the bugs are worked out, I don't have any more suggestions. Have you sent a Report Bug report?


#5

yeah I sent one but no get back so far I just want to know if there's something missing or if it is really a bug


#6

@deeebleezy You wrote
background: url(https://[...].jpg) no-repeat center;

In exercise "6. Background: Position" you learned how to adress the grid: row column
So "center" can't be true in my opionen. Try:
background: url(https://[...].jpg) no-repeat top center;


#7

I just tried that code & it gave me the same error message. I do appreciate the response tho


#8

This code helped me pass (change it on your CSS stylesheet):

#cover {
  height: 900px;
  position: relative;
  top: -55px;
  width: 100%;
background: url("https://s3.amazonaws.com/codecademy-content/courses/web-101/unit-8/htmlcss1-img_bicycles.jpeg") no-repeat center top;
}

#9

I used your code and it worked thank you very much


#10