# Change background image on all pages
**URL:** https://meta.discourse.org/t/change-background-image-on-all-pages/117301
**Category:** Support
**Created:** [May 9, 2019, 6:11pm UTC](https://meta.discourse.org/t/change-background-image-on-all-pages/117301 "2019-05-09T18:11:19Z")
**Posts on this page:** 5
**Page:** 1
### Author:  [@stevef](https://meta.discourse.org/u/stevef)
#### Post date: [May 9, 2019, 6:11pm UTC](https://meta.discourse.org/t/change-background-image-on-all-pages/117301/1 "2019-05-09T18:11:19Z")
Hello - Is there anyway to use my own custom background image for all pages?
Thanks
---
### Author:  [@nexo](https://meta.discourse.org/u/nexo)
#### Post date: [May 9, 2019, 6:25pm UTC](https://meta.discourse.org/t/change-background-image-on-all-pages/117301/2 "2019-05-09T18:25:01Z")
Add this theme component by @Johani to your site:
> [@StackBlur backgrounds](https://meta.discourse.org/t/stackblur-backgrounds/79344):
>
> warning This is not supposed to be used as a theme by itself. This is a theme component that’s supposed to handle the background only. It’s supposed to be incorporated into your theme design. Repo: [GitHub - hnb-ku/StackBlur-backgrounds-discourse-theme-component](https://github.com/hnb-ku/StackBlur-backgrounds-discourse-theme-component) This component uses [Mario Klingemann](https://github.com/flozz)’s [StackBlur](https://github.com/flozz/StackBlur) library (2kb gzipped - [MIT license](https://github.com/flozz/StackBlur/blob/master/LICENSE)) to generate high scroll performance blurred backgrounds based on an image you select in a \ element. Examples: (these are compressed so t…
---
### Author:  [@Systmyz](https://meta.discourse.org/u/Systmyz)
#### Post date: [October 4, 2019, 1:06pm UTC](https://meta.discourse.org/t/change-background-image-on-all-pages/117301/3 "2019-10-04T13:06:02Z")
Is there any theme component which shows normal background instead on Blur background?
---
### Author:  [@dax](https://meta.discourse.org/u/dax)
#### Post date: [October 4, 2019, 1:30pm UTC](https://meta.discourse.org/t/change-background-image-on-all-pages/117301/4 "2019-10-04T13:30:57Z")
No, but you can create a new theme component with something like this
```css
#main {
background-image: url(image-URL);
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center;
}
```
---
### Author:  [@Dave\_Olszewski](https://meta.discourse.org/u/Dave_Olszewski)
#### Post date: [August 25, 2020, 5:46pm UTC](https://meta.discourse.org/t/change-background-image-on-all-pages/117301/5 "2020-08-25T17:46:40Z")
I tried this and it had a weird interaction with category background images. I changed it to from `#main` to `body` and this worked ok.
However in both cases I noticed that the UI elements were easily obscured by the background image and set to making various css classes used by the interface to have a solid white background, but this is cumbersome as there’s no clear single class that will handle all of the containers.
Am I doing this wrong? Is there a better way to set a general background image that doesn’t obscure the text and interface?
Here is how I am setting the background:
```plaintext
body {
background-image: url(my-url);
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center;
}
```
and here is how I am “fixing” the UI:
```plaintext
.container, .search-container, .reviewable, .discourse-post-event-upcoming-events, .tag-sort-options, .page-not-found, .page-not-found-topics {
background-color: #FFFFFF;
border: 4px;
border-style: solid;
border-color: #FFFFFF;
}
```
while the category backgrounds are set simply using the category UI