Backgrounds

This page is for admins on how to implement their background images for the new "desktop" skins, it will effect both light and dark theme.

Fandom has updated the Admin "Theme" generator to allow for full size backgrounds. The instructions are easy to follow, just remember that you have to upload the image for both the dark and light themes. You can upload different images, or set them both to exactly the same look for everything.

The Transparency slider is for the Background image, not for the article background. The following sections includes the code for changing the transparency of the Article Background so that the main background bleeds through.

as of 8/19/21 there are still some issues with the Theme background images. I am pretty sure that there are enough admins that will complain that fandom will continue to work on it. In the meantime, I've left the background image assigned from the admin css panel.

as of 8/27/21 the above mention issues with the background are now fixed and css code has been removed from the admin panel. I'm leaving it just in case of future needs.

## Background

This section is to use the background that is uploaded via the Oasis skin, admin -> Theme. There should be away to change the Https url to a new image, this line isn't actually working on this wiki, yet, but it works for all of my other ones. Note that the wiki name is in the url. Specific info about css and backgrounds can be found at (w3schools.com)

```
/* Customizing Background image */
body.mediawiki {
    background: black url(https://images.wikia.com/kurtherian-gambit/images/5/50/Wiki-background) center center/cover no-repeat fixed;
}
```

This snippet forces the background image as fixed, so it doesn't scroll

```
/* Background fixation */
body.mediawiki {
    background-attachment: fixed !important;
}
```

This snippet prevents any header images that are uploaded from displaying, when it displays with the above background code everything is a little off.

```
/* No header */
.main-container .fandom-community-header__background::before {
    background-image: none;
}
/* End Customizing Background image */

```

## Transparent Article Background

This snippet is what turns the pages transparent. The "Right Rail" means the Right Column on all pages except the main home page.
rgb = red, blue, green. a = transparanrency value in decimal. 1 = Not transparent at all, 0 = total transparency and 0.5 means 50% Transparent.

class page\_main is for the left side of all pages and the home page both columns. Next is the two themes for the right rail. rgb(255,255,255) = white. rgba(0, 0, 0) = black. You can use other colors if you know the rgb values. The last parameter at the end of the line 0.8 is the transparency value where is 1 = no transparency, incrementing down by 10th, so in theory .8 shouldn't be much but it is. You can enter .85 or even more such as .855555, if you want to experiment.

```
/* Make page area and right rail transparent but keep content solid
https://dev.fandom.com/f/p/4400000000000014453/r/4400000000000042552*/
.theme-fandomdesktop-light .page__main {
    background-color: rgba(var(--theme-page-background-color--rgb), 0.8);
}
.theme-fandomdesktop-dark .page__main {
    background-color: rgba(var(--theme-page-background-color--rgb), 0.85);
}
.theme-fandomdesktop-dark .page__right-rail {
    background: rgba(0, 0, 0, 0.8);
}
.theme-fandomdesktop-light .page__right-rail {
    background: rgba(255,255,255, 0.8);
}
/* end transparancy */

```