> For the complete documentation index, see [llms.txt](https://chnn-anne.gitbook.io/mern-stack/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://chnn-anne.gitbook.io/mern-stack/important-css-concepts/background-images.md).

# Background Images

If you’d like to set an image as the background of a web page or an HTML element, rather than simply inserting the image onto the page, then you’ll need to use the CSS **background-image** property. 

{% hint style="info" %}
If you want to set an image as the background of the entire web page, then you’d have to apply CSS to the body element.
{% endhint %}

If the image is large enough, it will fill the entire page without the need for additional properties.

![](https://1336010533-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MWvM--ORajEf7cHwnl6%2F-MYYQoFumhqhqBDesvWx%2F-MYmMJY2p-OlknnBKHGw%2Fimage.png?alt=media\&token=74695955-55b8-4943-9fe8-5c0c9fa42d47)

```css
background-image: url("https://images.pexels.com/photos/235767/pexels-photo-235767.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940");
```

If the image is not large enough to cover the entire page, it will repeat.

![](https://1336010533-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MWvM--ORajEf7cHwnl6%2F-MYYQoFumhqhqBDesvWx%2F-MYmP9GNubg56xB389A2%2Fimage.png?alt=media\&token=3302e6fa-4071-4d96-a043-c63aabf79221)

**background-repeat: no-repeat** - prevents the image from repeating, but leaves part of the background unfilled.

![](https://1336010533-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MWvM--ORajEf7cHwnl6%2F-MYYQoFumhqhqBDesvWx%2F-MYmPTZSmp4iOB9ljbbk%2Fimage.png?alt=media\&token=4dd50b62-0244-4a8b-af5b-602344db47cf)

To ensure the image takes up the entire screen, set the **background-size** property to “cover.” To avoid the image stretching out, set the **background-attachment** property to “fixed.” That way, the image will maintain its original proportions.

![](https://1336010533-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MWvM--ORajEf7cHwnl6%2F-MYYQoFumhqhqBDesvWx%2F-MYmQFg9iMOzJUK6TXug%2Fimage.png?alt=media\&token=0dca854e-06ff-41cc-b48d-cdc7360cd964)

```css
body {
  background-image: url('mouse.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}
```