CSS Backgrounds || Bcis Notes

CSS Backgrounds

The CSS background properties are used to define the background effects for elements. CSS background properties:

background-color
background-image
background-repeat
background-attachment
background-position

1. CSS background-color:
The background-color property specifies the background color of an element.

CODE:

Result:

2. CSS background-image:
The background-image property specifies an image to use as the background of an element. By default, the image is repeated so it covers the entire element.

CODE:

Result:

CSS background-repeat:
By default, the background-image property repeats an image both horizontally and vertically. Some images should be repeated only horizontally or vertically, or they will look strange.

CSS background-position:
The background-position property is used to specify the position of the background image.

CODE:

Result:

CSS background-attachment:
The background-attachment property specifies whether the background image should scroll or be fixed (will not scroll with the rest of the page):

CODE:

Result:

CSS background – shorthand property:
To shorten the code, it is also possible to specify all the background properties in one single property. This is called a shorthand property.

The shorthand property for the background is the background.

CODE: