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:

  • 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

Syntax


background: bg-color
            bg-image
            position/bg-size
            bg-repeat
            bg-origin
            bg-clip
            bg-attachment
#background-box {
	background: transparent
            url('../paris_eiffel.jpg')
            0 0/contain
            repeat
            border-box
            border-box
            scroll;
}
#background-box::first-line {
	background-color:hsl(117, 27%, 41%);
}
#background-box::first-letter {
	background-color:hsl(38, 100%, 87%);
}
The element has content, padding (2em) and a border(2em). 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

Posted in CSS

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.