background

The background property specifies a color or an image of an element – its content, padding and border. This property can be used on inline, block, inline-block, table elements and ::first-letter and ::first-line. The background property and all background-related propertiesĀ  are not inherited.

The background property is a shorthand property for the following properties (recommended order):

  • image
  • position
  • size
  • repeat
  • origin
  • clip
  • attachment
  • color
Value: Initial value: Inherit:
background-image: uri none no
background-position: <percentage>
<length>
left | center | right
top | center | bottom
0% 0%
0 0
top left
no
backgorund-size: <length> | <percentage> | auto | cover | contain auto auto no
background-repeat: repeat | repeat-x | repeat-y | space | round | no-repeat repeat no
background-origin: padding-box | border-box | content-box padding-box no
background-clip: border-box | padding-box | content-box border-box no
background-attachement: scroll | fixed | local scroll no
background-color: color | transparent transparent no
#background-box {
	width: 700px;
	height:300px;
	background: url('../img/mainau.jpg') 0 0 no-repeat border-box transparent;
	border:50px solid rgba(0, 0, 0, 0.3);
	padding: 25px;
	color:#fff;
	font-size: 29px;
}
#background-box::first-line {
	background-color:#6c9a0a;
}
#background-box::first-letter {
	background-color:#d6c800;
	color:#000;
}
The element has content, padding (25px) and a border(50px). The border color is set to rgba(0, 0, 0, 0.5).
The background image is attachedĀ  to ‘div’ element. The background-color is attached to ::first-line and ::firs-letter.

Resources