Change background image on all pages

Support
1

Hello - Is there anyway to use my own custom background image for all pages?

Thanks

2

Add this theme component by @Johani to your site:

7 Likes
3

Is there any theme component which shows normal background instead on Blur background?

4

No, but you can create a new theme component with something like this

#main {
    background-image: url(image-URL);
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center;
}
6 Likes
5

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:

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:

.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

1 Like