CSS Backgrounds

CSS Backgrounds

CSS background properties are used to add background effects for elements

We will learn below following CSS background properties:

• background-color
• background-image
• background-repeat
• background-attachment
• background-position
• background (shorthand property)

CSS background-color

The background-color property specifies the background color of an element.

Syntax: {background-color: color;}

With CSS, we can specify a color by using below values

a valid color name - like "red"
a HEX value - like "#ff0000"

an RGB value - like "rgb(255,0,0)"

body{
    background-color: lightblue;
}

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.

Set the background image for a page: 

body{

    background-color: lightblue;

    background-image: url(./featured-small-circular.jpg);

}

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

If the image above is repeated only horizontally (background-repeat: repeat-x;), the background will look better

body{

    background-color: lightblue;

    background-image: url(./featured-small-circular.jpg);

    background-repeat: repeat-x;

}

To repeat an image vertically, set background-repeat: repeat-y

body{

    background-color: lightblue;

    background-image: url(./featured-small-circular.jpg);

    background-repeat: repeat-y;

}

CSS background-repeat: no-repeat

To Show the background image only once is also specified by using background-repeat property

body{

    background-color: lightblue;

    background-image: url(./featured-small-circular.jpg);

    background-repeat: no-repeat;

}

background-position

background-position property is used to specify the position of the background image

body{

    background-color: lightblue;

    background-image: url(./featured-small-circular.jpg);

    background-repeat: no-repeat;

    background-position: right top;

}

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.

You can use the shorthand property background:

body {

    background-color: lightblue;

    text-align: center;

    background-image: url(./featured-small-circular.jpg);

    background-repeat: no-repeat;

    background-position: right top;

    background-attachment: scroll;

/* shorthand */

    background: lightblue url(./featured-small-circular.jpg) repeat right top;

}