FANDOM


  • Hello everyone. I'm having problems with custom backgrounds, I put them in and simply they start getting too big or with distorted resolution. 

    I use the same code in the same fandom only from another language and works perfectly. Code;

    .page-Marvel_Comics.skin-oasis,
    [class*=Marvel_Comics_].skin-oasis {
      background-image: url(https://images6.alphacoders.com/618/618008.jpg);
      background-size: cover;
    }

    Here in this first image, the background is distorted, but it simply works back on the editing page.

    The background of the main page] is also messy, it gets normal at first, but if you scroll on the page it grows and loses all resolution.

      Loading editor
    • bump

        Loading editor
    • Please put the backgrounds back. Two screenshots is nowhere close to enough information for us to begin to figure out what is going on. However, my very broad guess is it is a combination of what you are assigning the background to and the value of "background-size". Based on the CSS your posted, it looks like you are assigning the background to the entire body which is not necessarily limited to the visible part of the page. As for "background-size" the option you have selected fills the entire area even if it means distorting the image; so the distortion is no surprise.

        Loading editor
    • The backgrounds are there, only now it's gone off the main page and it's been normal in recent activities. 

      And it looks like I managed to fix it, now the only problem is that he disappeared ONLY from the main page, as you can see here: Liber Proeliis Main Page  

        Loading editor
    • I am still not seeing any of the backgrounds as-is but I think I have identified why. The issue for both the main page and the Marvel Comics pages is that your value for "background-image" is being overridden by a rule with higher specificity. As for the distortion, it is indeed because you are using "background-size: cover;". One more thing, in general, it is a good idea to stay away from using "!important". Using it to get things working seems to be a common bad habit among FANDOM wiki editors. However, the better solution is to increase the specifcity of your selector. Try this instead of your current CSS:

      body.skin-oasis.uap-skin {
          background-size: 100%;
          background-image: url("https://vignette.wikia.nocookie.net/kirby/images/f/f8/Rbbt-squares-field.png/revision/latest?path-prefix=en"), url("https://vignette.wikia.nocookie.net/kirby/images/a/a6/Rbbt-scanlines.png/revision/latest?path-prefix=en"), url("https://vignette.wikia.nocookie.net/liberproeliis/images/5/5a/Plexus-background_soxrf8r1l_thumbnail-full01.png/revision/latest?cb=20190711013232&path-prefix=pt-br")
      }
      body.page-Marvel_Comics.skin-oasis,
      body[class*=Marvel_Comics_].skin-oasis {
          background-image: url(https://images6.alphacoders.com/618/618008.jpg);
          background-attachment: fixed;
      }
        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.