19 Adding background with CSS

Last updated on October 31st, 2020 at 07:50 am.

19 Adding background with CSS – HTML and CSS Tutorial

In this post we’ll add a background to our html template. You may watch this full tutorial here and download all the files here.

Adding Background color

body {
    background-color: black;
}

background-color will define the color of any HTML element. In the above example, it makes the body of the page  black.

Adding Background Image

You can use an image as the background of an HTML element.

You can add an image background as follows:

body {
    background-image: url("myImage.png");
}

You may also use an absolute path to an image , as follows:

body {
    background-image: url("https://example.com/images/myImage.png ");
}

Background Image repeat

An image can be repeated horizontally or vertically. By default an image will be repeated both horizontally and vertically.

This means that if you use a small image, it will be repeated until the entire area is covered.

To repeat an image vertically, you will repeat it along the Y axis as follows.

body {
    background-image: url("https://example.com/images/myImage.png ");

   background-repeat: repeat-y;
}

To repeat an image horizontally it will be:

body {
    background-image: url("https://example.com/images/myImage.png ");

   background-repeat: repeat-x;
}

If you want to use the image as it is, without repeating it, you may also do that as follows:

body {
    background-image: url("https://example.com/images/myImage.png ");

   background-repeat: no-repeat;
}

If you are not repeating the image, you may want to position it. To position the background image you will use background-position as follows:

body {
    background-image: url("https://example.com/images/myImage.png ");

   background-repeat: no-repeat;

  background-position: right top;
}

You can also set scroll behavior for the background image. That is, you may set it to scroll with the page elements or for it to stay fixed. This is done using background-attachment .

For instance to make the background image  fixed you will do it as follows:

body {
    background-image: url("https://example.com/images/myImage.png ");

   background-repeat: no-repeat;

  background-position: right top;

background-attachment: fixed;
}

Other possible values for the background attachment include:

Background shorthand

You can use the property background ,  to define the background in one line.

The correct background shorthand  syntax based on the above properties :

Selector{

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

}

Example based on the ones we have done above:

body {  #000   url(“http://example.com/images/myImage.png “)  no-repeat  fixed   right   top }

We’ll continue in the next post/video .

To learn more about HTML and CSS right away, click on the button below: