Page 49 - CSS

Chapter 5: Backgrounds

Introduction

With CSS you can set colors, gradients, and images as the background of an element.

It is possible to specify various combinations of images, colors, and gradients, and adjust the size,
positioning, and repetition (among others) of these.

Syntax

• background-color: color | transparent | initial | inherit;
• background-image: url | none | initial | inherit;
• background-position: value;
• background-size: <bg-size> [<bg-size>]
• <bg-size>: auto | length | cover | contain | initial | inherit;
• background-repeat: repeat | repeat-x | repeat-y | no-repeat | initial | inherit;
• background-origin: padding-box | border-box | content-box | initial | inherit;
• background-clip: border-box | padding-box | content-box | initial | inherit;
• background-attachment: scroll | fixed | local | initial | inherit;
• background: bg-color bg-image position / bg-size bg-repeat bg-origin bg-clip bg-attachment
initial | inherit;

Remarks

• CSS3 gradients will not work on versions of Internet Explorer less than 10.

Examples

Background Color

The background-color property sets the background color of an element using a color value or
through keywords, such as transparent, inherit or initial.

• transparent, specifies that the background color should be transparent. This is default.

• inherit, inherits this property from its parent element.

• initial, sets this property to its default value.

This can be applied to all elements, and ::first-letter/::first-line pseudo-elements.

Colors in CSS can be specified by different methods.

https://riptutorial.com/ 27