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

CSS Framework Basics Build a Website with Bootstrap Building the Hero Component

Miguel Agawin
Miguel Agawin
3,211 Points
Posted by Miguel Agawin
Miguel Agawin
3,211 Points

background short form displays different bg result

Shorthand of background-image and background-repeat shows a different result to when they're written separately. An rbga attribute is added if short form when I inspect. Looking back in Bootstrap doc customize download page, @jumbotron-bg was defined and it did show the #a085c6 colour before adding the background-image. Not sure why this is happening.

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Miguel,

Can you show both versions of the css that you're using? I don't know what you mean by short form of background-image. Do you mean that you're using the shorthand background property to set the background-image and background-repeat value?

Miguel Agawin
Miguel Agawin
3,211 Points
Miguel Agawin
Miguel Agawin
3,211 Points

It's just past the 4:00 mark on the video listed above. And 'Yes' to your last question; shorthand shows different result and I don't know why.

1 Answer

Thomas Prince
Thomas Prince
23,302 Points
Thomas Prince
Thomas Prince
23,302 Points

I messed with this using the jquery basics workspace and the following:

body {
    font-family: sans-serif;
    background: #384047;

  /*
  background-image: url('../images/boat.png');
  background-repeat: no-repeat;
  background-position: 50% 100%;
  */
  background: url('../images/boat.png') no-repeat 50% 100%;

}

The code that's commented out generated the same effect as the shorthand method below except that it made the background white because the default value for the short hand is "transparent", which allows the browser default of white show through. Easily fixed by adding a color to the shorthand:

body {
    font-family: sans-serif;
    background: #384047;

  /*
  background-image: url('../images/boat.png');
  background-repeat: no-repeat;
  background-position: 50% 100%;
  */
  background: #384047 url('../images/boat.png') no-repeat 50% 100%;

}

Re-reading your post I think this was your problem. Sometimes (Maybe all the time?) if a value isn't specified for a property in shorthand, a default is supplied, overriding anything specified earlier. The MDN - background doc lists the defaults for background.

Hope this helped! Not much sleep and I haven't actually done the framework basics track, so I might be missing something. Good luck!

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Thomas Prince is correct here.

If you tried to set your background-image and background-repeat value like this:

background: url('path/to/image') no-repeat;

then you will lose the previous background-color that you've set. All omitted values are reset back to their initial value and that's transparent for background-color.

From the link Thomas posted:
The background CSS shorthand property assigns explicit given values and sets missing properties to their initial values.

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hadn't seen your comment yet.