# Backgrounds

Updated on Dec 22, 2021 by [Alan Morel](/content/alanmorel/index.html)

- [#css](/content/tag/css/index.html)

## Table of Contents

1. [Background Color](/content/classes/css/backgrounds#background-color/index.html)
2. [Background Image](/content/classes/css/backgrounds#background-image/index.html)
3. [Background Image Repetition](/content/classes/css/backgrounds#background-image-repetition/index.html)
4. [Background Image Position](/content/classes/css/backgrounds#background-image-position/index.html)
5. [Background Image Size](/content/classes/css/backgrounds#background-image-size/index.html)
6. [Gradients](/content/classes/css/backgrounds#gradients/index.html)
7. [Linear Gradients](/content/classes/css/backgrounds#linear-gradients/index.html)
8. [Radial Gradients](/content/classes/css/backgrounds#radial-gradients/index.html)
9. [Further Reading](/content/classes/css/backgrounds#further-reading/index.html)

A pretty easy and fast way to add a bit of flavor to your pages is to give it a background of some kind. Whether that background is a color, an image, or a gradient, a background makes a big difference in how your website looks. The two main ways to change the background of your website is to change the background color or background image. We'll cover both of these below.

## Background Color

This is the easiest way to change your page's background color from the default white. You just pick a color with `background-color` and let the browser do the rest like this:

```css
body {
  background-color: lightgray;
}
```

Example of background color.

You can replace `light-gray` with any color, and it will also work just fine. Examples of web safe colors include `red`, `green`, `blue`, `yellow`, `purple`, `orange`, `pink`, `brown`, `black`, `white`, and `gray`.

## Background Image

When you want to use an image instead of color for your background, you can use the `background-image` property. This property takes a URL to an image, and the browser will use that image as the background.

Let's say you want this image as your background:

A cute puppy.

The [CSS](/content/classes/css/index.html) might look like this:

```css
body {
    background: url("puppy.png");
}
```

And your page like this:

A cute puppy as your background image.

## Background Image Repetition

For images where you might want to **repeat** it over and over again as the background, you can specify just that. The property for this is `background-repeat` and below are the valid values for this:

1. `repeat`: This repeats the image both on the x and the y-axis.
2. `repeat-x`: This repeats the image on the y-axis.
3. `repeat-y`: This repeats the image on the x-axis.
4. `no-repeat`: This renders a single image without any repetition.

Background images can be repeated in any of the four directions, so you can use this to make a background image that repeats in both the x and y-axis.

## Background Image Position

In case you don't want your background image to repeat, perhaps you then want to control **where on the screen** it will be rendered. By default, it will render from the top left corner, but you can specify otherwise using the `background-position` property. The property takes two values, the first is the x-axis and the second is the y-axis.

The main values for this property are `left`, `top`, `right`, `bottom`, and `center`, but you can also use lengths in the form of `background-position: x y;`.

Below are some valid values for `background-position`:

```css
body {
    background-position: 40% 70%;
    background-position: right top;
    background-position: left center;
    background-position: right bottom;
    background-position: 2rem 5rem;
}
```

## Background Image Size

Let's say you want to change the **size** of your background image. Use the `background-size` CSS property for this.

You are free to give it a new width and height to set the image to, like so:

```css
body {
    background-size: 250px 300px;
    background-size: 70% 90%;
}
```

In the common case where you want the image to stretch and take up the entire window while respecting the image's ratio, you can use the `cover` value:

```css
body {
    background-size: cover;
}
```

## Gradients

When you don't want to use a solid color, using **gradients** is a simple way to use multiple colors on your page while allowing the browser to render all the colors in between.

## Linear Gradients

The most simple of gradients are **linear gradients**. For example, here is a basic blue to purple gradient:

```css
body {
    background: linear-gradient(blue, purple);
}
```

A blue to purple linear gradient.

If you don't want your linear gradients to go from top to bottom, you can assign a direction value. If you give the property a **degrees** value, it will render it at that angle.

Here is how it looks like when you render at a 90-degree angle:

```css
body {
    background: linear-gradient(90deg, blue, purple);
}
```

A blue to purple angled linear gradient.

## Radial Gradients

Gradients can also be used to create **radial gradients**. Radial gradients are similar to linear gradients, but instead of using two colors, you can use a single color and a **radius**. Radial gradients are rendered in the form of a circle. To demonstrate, here is a radial gradient using the same colors as before:

```css
body {
    background: radial-gradient(blue, purple);
}
```

A blue to purple radial gradient.

When done right, gradients can be a very tasteful way to spruce up your page! You can use the `background-size` property to control the size of the gradient and the `background-position` property to control where it is rendered.