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

Yukimi Kazari

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)

ChrisB

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;
  }
}

Yukimi Kazari

@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