Theory
Theory

Background property

The background of an element can be set using separate properties: background-color, background-image and so on. This results in a rather cumbersome record.

You can also set the background using the shorthand background property:

background: [bc] [bi] [br] [bp] [ba];
/* Symbols:
[bc] — background-color
[bi] — background-image
[br] — background-repeat
[bp] — background-position
[ba] — background-attachment
*/

If no component is specified, the default value is taken. Below are examples.

background: #e74c3c;
background: url("img.png") no-repeat;
background: url("img.png") 10px 20px;

The first example simply sets the background color.

The second example sets a non-repetitive background image, and defaults to a transparent background color, positioned in the upper left corner.

The third example sets the background image and its position, along with a default transparent background color and an all-around repeat mode.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Background property</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="block block1"> Hypnocat </div> <div class="block block2"> Fishcat </div> </body> </html>

CSS

body { padding: 20px; font-size: 20px; font-family: "Tahoma", sans-serif; } .block { width: 140px; margin: 25px auto; padding: 25px 0; padding-left: 90px; color: white; border-radius: 5px; box-shadow: 1px 1px 3px #999999; } .block1 { background: none; } .block2 { background: none; }

GoalsCompleted

Set the first block background: background color #e74c3c, image cat_eyes.png, no repetition, image position 10px on the left and 5px on top.
Set the second block background: background color #2980b9, image cat_fish.png, no repetition, image position 10px on the left and 5px on top.