FANDOM


  • Is there any way to reposition how and where the background appears on its X/Y axis? I've just recently added in a custom background to a wiki but because of the size of it, the screen cuts off the bottom and is stuck on the top half. I'd really rather have it focus on the center of the picture but I can't see any positioning options in the Theme Designer. 

      Loading editor
    • A link to the wiki/background would be helpful, but it's possible to do it with CSS:

      .skin-oasis {
         background-position: ;
      }
        Loading editor
    • https://mindseries.fandom.com/

      Not sure how to link the background, I just barely know the basics of coding on the site

        Loading editor
    • You can position the background by pasting this code in your wiki's Wikia.css page:

      If you want it right at the center, then paste the code below into the linked page, and don't bother to change it

      body.skin-oasis {
         background-position: 50% 50%;
      }

      You can modify the position of the background by tweaking the percentage. The first one positions it horizontally, and the second one does it vertically. Lower the percentage, the further left/higher the background's positioned.

        Loading editor
    • background-position: center center;
      

      will center it better.

      Also I don't think you need the !important. It'll just make it harder for users to use their personal CSS.

        Loading editor
    • You do need !important from what I can see. It won't work without it because you need to prioritize the code over the default stylesheet.

      Also, 50% 50% does the same thing as center center

        Loading editor
    • Custom site css is prioritized over the default css, but maybe there is an issue with the specificity of the css rules. I can't look into it as I'm currently on a mobile but try body.skin-oasis instead of skin-oasis.

      50% 50% will place the top-left corner of the image at the center, wouldn't it?

        Loading editor
    • I used PortableCSSPad to test it and 50% 50% has the exact same effect as center center.

      Also, yeah, looks like it is because of the specificity rules because body.skin-oasis works without !important, .skin-oasis doesn't

        Loading editor
    • HumansCanWinElves, that is certainly what one might expect without giving it much thought. Indeed, when I first read your post, I thought, "Yeah. Isn't that how it works?". However, I did some experimenting of my own and found that Parkour2906 is in fact correct. Looking at documentation, the definition when using % is actually a bit more complcated then that. 0% is defined as the left/top edge of the image is aligned with the left/top edge of the container and 100% is defines as the right/bottom edge of the image is aligned with the right/bottom edge of the container. The linear equation that results from this means that 50% is the same as the keyword "center".

        Loading editor
    • Ooh interesting. That would explain some of the issues I had when exprimenting with CSS patterns.

        Loading editor
    • So wait, when exactly do I use !important and where should I use it when it needs to be used?

        Loading editor
    • Ideally, never use it. Even if it's your own code and no one else will ever touch it - using !important will make it harder for you to maintain the code in the future.

      As a wiki admin, where your code affects other people's code - using !important is even worse (unless it's in your personal CSS).

      I would say there are 3 cases when you will use !important on the wiki CSS:

      1. When you have to override an inline style (those in the style="...") - this is rare.
      2. When you have to override another rule that used !important (you see the problem? The first person forced you to it, and you are pushing the problem to the next person)
      3. When you just can't figure out how to make your rule specific enough to override the existing rule (but try asking someone who may be able to help).
        Loading editor
    • Fair enough. Tbh I never mess with the CSS anyway, I've no idea how to use it and if I do dare to try it only works about half the time.

        Loading editor
    • Yes, it needs some level of understanding to not mess it up. If it's in your interest - you can learn. If not - then you can ignore it most of the time. Fandom allows custom CSS and JS, but the wiki should work fine without it, and when the need comes you can ask for a specific help.

        Loading editor
    • Just to through my 2 cents in. Number 3 is extremely unlikely to happen; at least on Fandom. Number 1 can sometimes be avoided. I see a lot of wikis use in-line CSS for templates. If you find yourself overriding in-line CSS like that, you can always move the CSS to a class and avoid !important that way.

        Loading editor
    • A FANDOM user
        Loading editor
Give Kudos to this message
You've given this message Kudos!
See who gave Kudos to this message
Community content is available under CC-BY-SA unless otherwise noted.