FANDOM


  • Hello.

    I've been trying to add a background image to a <div> on one of my pages. I'm aware of the CSS way of doing so, but Fandom combines HTML and CSS properties into one thing, such as background-color, etc. Is background-image a compatible Fandom attribute? I've been having trouble with getting it to work.

    All replies appreciated. Money Hurricane (talk) 00:24, December 5, 2017 (UTC)

      Loading editor
    • Money HurricaneThread:1355047
      Is background-image a compatible Fandom CSS attribute?

      yes, via site-wide css.
        Loading editor
    • That was not what I was asking. I apologize if my question was not quite clear.

      Here's an example of what I meant:
      <div style="color: black; background-color: #3030ff; border-radius: 25px; border: 2px dashed white; padding: 20px; height: 100px"></div>

      That code creates this:

      Notice the "background-color," for example. That is a CSS attribute within the <div>, but this is not a CSS code page such as global.css, etc.

      If background-color works in that manner, does background-image work as well? As I referred to in my original post, I'm having trouble with it.

      If it does work, how do I link the image?

        Loading editor
    • CSS and HTML are meant to work together. There is no such thing as a pure CSS site or a pure HTML site. Putting CSS in HTML tags is not a "Fandom thing", it is called inline styling and it is part of official HTML specifications.

      The example you have given uses purely inline styling. Due to the markup interpreter (which is a "Fandom thing" since it needs to handle both MediaWiki markup and Fandom's custom tags), you cannot specify a background image using inline styling (note that there are also limits on the HTML tags you can use). However, as Fngplg was trying to say, it can be done using site-wide (i.e. stylesheet) CSS. You can make stylesheets the same way you make any other page on your wiki; just be sure the page name ends in ".css". Note, however, that only a few pre-named stylesheets are actually loaded. For more information on these pre-named stylesheets, see Help:Community_CSS_and_JS, Help:Advanced_CSS_and_JS and Help:Personal_CSS_and_JS.

      You can use additional stylesheets through use of @import. For example, I have created my own stylesheet to fix some display issues in Internet Explorer 11 (here). I then include it in my global (personal) CSS. As such, that CSS is applied when I view any Wikia site.

        Loading editor
    • Ah, alright. I'm not exactly super knowledgeable in coding so I was not aware of the "inline styling" thing. Thanks for clearing that up.

        Loading editor
    • No problem. If you need anymore help, just let us know.

        Loading editor
    • Hi again.

      I figured out how to add a background image via CSS and it is now in place. However, I've noticed that it does not scale to automatically fully fill the table on different screen sizes.

      How do I make it automatically scale to entirely fill the table regardless of device size?

        Loading editor
    • Depending on the behavior you want, use either

          background-size: cover;

      or

          background-size: contain;

      See here.

        Loading editor
    • Is this code correct?

      .wallpaper1 { 
         background:     url("https://vignette.wikia.nocookie.net/hypotheticalhurricanes/images/b/b6/Snow_Background.jpg") no-repeat center top !important;
         background-size: cover;
      }

      I've purged the page, cleared my cache, but it doesn't appear to be working. This code is in my common.css for Hypothetical Hurricanes Wiki.

        Loading editor
    • Could you link to the page you are testing it on? I will need to check to see if any other CSS is overriding it.

      Alternatively, you can check yourself by using the development tools of any common desktop/laptop web browser. The most common way of accessing them is right-clicking on the page component you wish to examine and then selecting "Inspect Element" (or some equivalent) from the context menu provided by the browser.

        Loading editor
    • Sure. I am testing it on this page.

      The code in my previous reply is in my common.css, but it is not in the Wikia.css for that wiki.

      The following code is in the Wikia.css:

      .wallpaper1 { 
         background:     url("https://vignette.wikia.nocookie.net/hypotheticalhurricanes/images/b/b6/Snow_Background.jpg") no-repeat center top !important;
      }
        Loading editor
    •   Loading editor
    • It's supposed to cover the whole area, not half of it.

        Loading editor
    • then u have to add class wallpaper1 to parent div, not to child table.

        Loading editor
    • Ah, alright. I have done so, and it appears to be working.

      Once again, thank you very much for the help Andrewds1021 and Fngplg. I appreciate it.

        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