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 HTML Forms Choosing Options Checkboxes

Willemijn B
Willemijn B
5,577 Points
Posted by Willemijn B
Willemijn B
5,577 Points

CSS: background property in input elements

I've been looking through the CSS in this workspace and playing around to see if I could figure out what exactly is different about the CSS in HTML forms versus 'standard' HTML. However, I can't seem to find out what the 'background' property does when applied to input elements - I've tried changing the values but nothing happened on the preview page. 'background-color' does effect some clear changes, but then I don't know what 'background' would do.

It's the very first property in this code block:

input[type="text"],
input[type="password"],
input[type="date"],
input[type="datetime"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="time"],
input[type="url"],
textarea,
select {
  background: rgba(255,255,255,0.1);
  border: none;
  font-size: 16px;
  height: auto;
  margin: 0;
  outline: 10;
  padding: 15px;
  width: 100%;
  background-color: #e8eeef;
  color: #8a97a0;
  box-shadow: 0 1px 0 rgba(0,0,0,0.03) inset;
  margin-bottom: 30px;
}

3 Answers

<noob />
<noob />
17,062 Points
<noob />
<noob />
17,062 Points

As far as i know, you use the CSS property background in order to set a background for the initire page, it could be color , img etch. and Background color is for giving a div,header, basically any element in html a background-color around him. the difference is background-color is for specific elements and background for the all page

Willemijn B
Willemijn B
5,577 Points
Willemijn B
Willemijn B
5,577 Points

Thanks for the response! However I'm afraid I still don't understand. If the property background sets a background for the entire page, why was it specifically included in the input targets? And surely then when I changed the value, the page background color would have changed? Given that nothing did change, what was the point of including the property in the first place?

Leonid Cha
Leonid Cha
6,623 Points
Leonid Cha
Leonid Cha
6,623 Points

I checked MDN about styling HTML forms with CSS and I think it's not affecting the input elements because there's no property such 'background' that'll be applied to it, 'background' is just a shorthand version of 'background-color' and other properties. It's kinda hard and clunky to style HTML forms with CSS because they were not created equal. (And yeah, you can use background whenever and wherever you want, there's NO difference between them if you're using it as background-image, bg-color etc)

Willemijn B
Willemijn B
5,577 Points
Willemijn B
Willemijn B
5,577 Points

Alright starting to make sense, thanks! Then why was this property even included at all if background-color actually does impact the elements?

Leonid Cha
Leonid Cha
6,623 Points

Shorthand properties are just easier and faster to use (like margin, padding, border etc)

Willemijn B
Willemijn B
5,577 Points
Willemijn B
Willemijn B
5,577 Points

Sure, I get that, but in this particular case the only value for background is a color, right? Which is overridden by the background-color property below it