How to add global background image? (Desktop and Mobile)



  • Hay, I wanted to add a background image to my forum (9854.moe) that would work for both desktop and mobile. Right now it works fine on desktop when i use,

    body { font-family: "Courier New", Courier, monospace; color: #ffffff;
    background: url(https://9854.moe/assets/uploads/system/background.png) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover; }
    ....
    

    but that did not scroll on mobile so I now use

    body { font-family: "Courier New", Courier, monospace; color: #ffffff; background-color: rgba(0,0,0,0); }
    
    html {
      background: url(https://9854.moe/assets/uploads/system/background.png) no-repeat center center fixed;
      background-size: cover;
      background-color: #000;
    }
    ....
    

    That produces that same results on desktop so check box there but on mobile its not so pretty. I want it to be static and not move with the content like it does on desktop.

    Im testing on Safari on both Mac and iPhone X

    EDIT: I want to keep this as custom CSS, Im really trying to stay away from custom themes and skins to maintain compatibility and because I cant really find where there stored (pre build)



  • I haven't applied your CSS to my own install, so I haven't tested your specific code, but; if you want different behaviour for different medias (desktop/mobile), you can play with media queries.

    e.g.

    /* Smartphones */
    @media (min-width:320px)  {
      body {
        font-family: "Courier New", Courier, monospace;
        color: #ffffff;
        background-color: rgba(0,0,0,0);
      }
    
      html {
        background: url(https://9854.moe/assets/uploads/system/background.png) no-repeat center center fixed;
        background-size: cover;
        background-color: #000;
      }
    }
    
    /* Desktop */
    @media (min-width:1281px) {
      body {
        font-family: "Courier New", Courier, monospace;
        color: #ffffff;
        background: url(https://9854.moe/assets/uploads/system/background.png) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
      }
    }


  • @chrisb said in How to add global background image? (Desktop and Mobile):

    /* Smartphones */
    @media (min-width:320px) {
    body {
    font-family: "Courier New", Courier, monospace;
    color: #ffffff;
    background-color: rgba(0,0,0,0);
    }

    html {
    background: url(https://9854.moe/assets/uploads/system/background.png) no-repeat center center fixed;
    background-size: cover;
    background-color: #000;
    }
    }

    /* Desktop */
    @media (min-width:1281px) {
    body {
    font-family: "Courier New", Courier, monospace;
    color: #ffffff;
    background: url(https://9854.moe/assets/uploads/system/background.png) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    }
    }

    Thanks that worked! Didn't fix the issue in safari mobile but that seems to be a bit more complicated but it does work on other mobile browsers


 

| |