<commit_before>---
title: Background
---
## Background
The background property lets you use images and colors to create backgrounds for your web pages.

### Background Color
The background color property allows you to choose the color of your element. This can be the background for the entire page or the background of one section of your page.
* An element is a piece of HTML such as a header or paragraph on a web page.

Here is an example of setting the background color for a web page to green.
```css
  body {
    background-color: green;
  }
```
![fullbackground](https://user-images.githubusercontent.com/26467304/31036038-845567f2-a538-11e7-8e6c-8a52bb0d44b8.png)

Here is an example of setting the colors for two elements. This will set the background of the header 
to purple and the rest of the page to blue.

```css
  body {
    background-color: blue;
  }
  h1 {
    background–color: purple;
  }
```
![twobackground](https://user-images.githubusercontent.com/26467304/31036152-0607936a-a539-11e7-9e9f-a5e60ade042d.png)

In CSS color can be defined in three ways:
* A valid color name such as `blue`
* A HEX value such as `#FFFFF` (Hex value for white)
* An RGB value such as `rgb(76,175,80)` (RGB value for light green)

### Background Images
You can use the background image property to set an image as a background for an element. 
The image is repeated by default so that it covers the entire element.
```css
body {
  background-image: url("barn.jpg");
}
```
![image](https://user-images.githubusercontent.com/26467304/31036366-eb1fc260-a539-11e7-835d-e3f935a22c86.png)


You can also link pictures or gifs that you find online by using their link (ie. from Google Images a search).
```css
body {
  background-image: url("https://mdn.mozillademos.org/files/11983/starsolid.gif");
}
```

### Background Image - The Repeat Property
The background image is repeated both vertically (up and down) and horizontally (across the web page) by default.
You can use the background-repeat property to repeat the image vertically or horizontally.

Here is an example that repeats the image vertically.
```css
body {
  background-image: url("barn.jpg");
  background-repeat: repeat-y;
}
```
![vertical](https://user-images.githubusercontent.com/26467304/31039770-8962c7a6-a54e-11e7-9d25-4fb09760d219.PNG)
<commit_msg>Grammar correction (#25386)<commit_after>---
title: Background
---
## Background
The background property lets you use images and colors to create backgrounds for your web pages.

### Background Color
The background color property allows you to choose the color of your element. This can be the background for the entire page or the background of one section of your page.
* An element is a piece of HTML such as a header or paragraph on a web page.

Here is an example of setting the background color for a web page to green.
```css
  body {
    background-color: green;
  }
```
![fullbackground](https://user-images.githubusercontent.com/26467304/31036038-845567f2-a538-11e7-8e6c-8a52bb0d44b8.png)

Here is an example of setting the colors for two elements. This will set the background of the header 
to purple and the rest of the page to blue.

```css
  body {
    background-color: blue;
  }
  h1 {
    background–color: purple;
  }
```
![twobackground](https://user-images.githubusercontent.com/26467304/31036152-0607936a-a539-11e7-9e9f-a5e60ade042d.png)

In CSS color can be defined in three ways:
* A valid color name such as `blue`
* A HEX value such as `#FFFFF` (Hex value for white)
* An RGB value such as `rgb(76,175,80)` (RGB value for light green)

### Background Images
You can use the background image property to set an image as a background for an element. 
The image is repeated by default so that it covers the entire element.
```css
body {
  background-image: url("barn.jpg");
}
```
![image](https://user-images.githubusercontent.com/26467304/31036366-eb1fc260-a539-11e7-835d-e3f935a22c86.png)


You can also link pictures or gifs that you find online by using their url (ie. from a Google Images search).
```css
body {
  background-image: url("https://mdn.mozillademos.org/files/11983/starsolid.gif");
}
```

### Background Image - The Repeat Property
The background image is repeated both vertically (up and down) and horizontally (across the web page) by default.
You can use the background-repeat property to repeat the image vertically or horizontally.

Here is an example that repeats the image vertically.
```css
body {
  background-image: url("barn.jpg");
  background-repeat: repeat-y;
}
```
![vertical](https://user-images.githubusercontent.com/26467304/31039770-8962c7a6-a54e-11e7-9d25-4fb09760d219.PNG)

{'fraction_non_alphanumeric': 0.09770238350869659, 'fraction_numerical': 0.07150526089757354, 'mean_word_length': 4.27519818799547, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 10, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5092019', 'n_tokens_mistral': 1650, 'n_tokens_neox': 1428, 'n_words': 558}