Background is a property that puts things behind the elements on your page. You can create buttons by putting a background color behind a link tag. Adding padding gives you space to click.

You can add a gradient of color, with one color fading into another. One way to do that is by doing something like this.

body {

linear-gradient(to right, red, yellow);

}

It will start on the left with red and fade into yellow on the right. We’ll do more with this next time with opacity, making things translucent.

You can also use an image in the background.

body {

background-image: url(‘./image.html’);

}

There are many properties you can add to that. There is background-size, repeat, cover, and position. Size you can play with. Cover tells the image to cover the whole element, here I’m using body, which would cover the whole page. If your image isn’t big enough, it will stretch out and look weird.

If your picture is small, you can tell it to repeat over and over to fill the page. Most often you would set it to not repeat.

background-repeat: no repeat;

Position can set the image on the page.

background-position: top left;

This would put the position in the top left of the element.

Use w3schools to check out other options and to see examples of them all.

You can watch this lesson.