Forum:Background Help Needed

Forums: Index → Support Requests → Background Help Needed

Fandom's forums are a place for the community to help other members.
To contact staff directly or to report bugs, please use Special:Contact.

Note: This topic has been unedited for 1657 days. It is considered archived - the discussion is over. Information in this thread may be out of date. Do not add to unless it really needs a response.

This is the image I commissioned.

This is what comes out when I apply it as a Background Graphic.

I'm attempting to add a background to my Wiki and am running into some trouble. I got an image commissioned previously for it, but it isn't quite fitting properly. Tile and Fix settings don't do much for it. What could be done to fix an image like this for use as a background?—This unsigned comment is by Inlovewithabsol (wall • contribs). Please sign your comments by adding "~~~~" in the source editor.

It's probably a good idea to post the CSS you used to add the image because the problem could have been a CSS issue. When I added the background to a page on my testing wiki, it worked fine.
If you're wondering what the CSS I used was, it was this:

.page-Test {
background-image: url("https://vignette.wikia.nocookie.net/vtol-vr/images/5/50/Wiki-background/revision/latest?cb=20201130225929"); 
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;
}

(test was the page i tested it on) - IAmGonnaDie O_o - Dec 1, 2020, 0:42:51

I tried using the Theme Editor for that, so that may have caused some issues. How do you implement a background with CSS?

Inlovewithabsol, VTOL VR Wiki Admin (talk) 00:57, December 1, 2020 (UTC)

I'm not great with CSS, but creating a page called "Mediawiki:Wikia.css" and pasting this onto the page should be sufficient

body {
    background-image: url("https://vignette.wikia.nocookie.net/central/images/5/5b/FandomBG.png/revision/latest?cb=20201130230525");
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

This page has some info about CSS enhancements if you're interested.

IAmGonnaDie O_o - Dec 1, 2020, 2:47:39

I put that line of code in, but now there's one problem remaining. I removed the original graphic from my Wiki in the Theme Designer, but there's still a black BG overlay covering up my new background that I can't seem to get rid of. It looks to be the Main color setting in the Background area. How can I get rid of that?

Inlovewithabsol, VTOL VR Wiki Admin (talk) 03:02, December 1, 2020 (UTC)

It might be the background that's set in the theme designer is overriding the one on the CSS page, so removing the background set in the theme designer might work. IAmGonnaDie O_o - Dec 1, 2020, 3:19:08

That'd be the feature determined by this color option over here.

Unfortunately, I'm not talking about the Background Graphic; I'd already removed that. I'm talking about the background-color value in .skin-oasis in the page's Source. That seems to be left over from the Theme Designer. There doesn't seem to be any way for me to bypass it through the Theme Designer itself. Do you know of any way in which I could manually bypass the background with CSS?

Inlovewithabsol, VTOL VR Wiki Admin (talk) 09:06, December 1, 2020 (UTC)

UPDATE: Turns out, there was a better way to do it after all. I managed to get a good Background Graphic image set up from the materials I got from my commissionee. No more need for dodgy CSS tricks for now! My issue is resolved.

Inlovewithabsol, VTOL VR Wiki Admin (talk) 10:13, December 1, 2020 (UTC)

I'm glad your issue was resolved. For future readers - indeed inserting a wiki background should be done with the theme designer in most cases, and using custom CSS for that should be reserved for special needs. Nam 22:47, December 2, 2020 (UTC)