Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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

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.

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

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

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!

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.

Hadn't seen your comment yet.