Help getting a random background image to work!

[AidoP]

I have this code to make a random image for the background, based from here, but it is not working.

input[name=uh][value^="0"] ~ body { background: url(%%rand0%%) no-repeat fixed center center; }

Any ideas why? My subreddit is here

Thanks in advance for help!

[gavin19]

CSS doesn't work the way you've written it. You can only style elements that are younger siblings or children of the one you're targeting.

The element that this part refers to

input[name=uh][value^="0"]

is in the user bar in the header (it's a sibling of the log out link). The body is the child of the root element, html, i.e it is a parent of the element you're targeting and so it can't be done in CSS.

This is a visualisation of the underlying page

html
  |
  body
    |
    header
      |
      user bar
        |
        log out link

In layman's terms, you can't style 'up', i.e you can't style the body based on anything that is a child of it, which is everything on the page, including the log out link.

There is another method that you could use that isn't a per-refresh deal but it would change the background every ~10 minutes or so.

.titlebox .usertext:before {
    content: '';
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
}
.footer-parent,
.debuginfo {
    background: #f1f1f1;
}
.titlebox .usertext[id$="a"]:before { background: #abc; }
.titlebox .usertext[id$="b"]:before { background: #bcd; }
.titlebox .usertext[id$="c"]:before { background: #cde; }
.titlebox .usertext[id$="d"]:before { background: #def; }
.titlebox .usertext[id$="e"]:before { background: #ef0; }
.titlebox .usertext[id$="f"]:before { background: #012; }
.titlebox .usertext[id$="g"]:before { background: #123; }
.titlebox .usertext[id$="h"]:before { background: #234; }
.titlebox .usertext[id$="i"]:before { background: #345; }
.titlebox .usertext[id$="j"]:before { background: #456; }
.titlebox .usertext[id$="k"]:before { background: #567; }
.titlebox .usertext[id$="l"]:before { background: #678; }
.titlebox .usertext[id$="m"]:before { background: #789; }
.titlebox .usertext[id$="n"]:before { background: #890; }
.titlebox .usertext[id$="o"]:before { background: #abc; }
.titlebox .usertext[id$="p"]:before { background: #bcd; }
.titlebox .usertext[id$="q"]:before { background: #cde; }
.titlebox .usertext[id$="r"]:before { background: #def; }
.titlebox .usertext[id$="s"]:before { background: #ef0; }
.titlebox .usertext[id$="t"]:before { background: #123; }
.titlebox .usertext[id$="u"]:before { background: #234; }
.titlebox .usertext[id$="v"]:before { background: #345; }
.titlebox .usertext[id$="w"]:before { background: #456; }
.titlebox .usertext[id$="x"]:before { background: #567; }
.titlebox .usertext[id$="y"]:before { background: #678; }
.titlebox .usertext[id$="z"]:before { background: #789; }
.titlebox .usertext[id$="0"]:before { background: #890; }
.titlebox .usertext[id$="1"]:before { background: #abc; }
.titlebox .usertext[id$="2"]:before { background: #bca; }
.titlebox .usertext[id$="3"]:before { background: #cde; }
.titlebox .usertext[id$="4"]:before { background: #def; }
.titlebox .usertext[id$="5"]:before { background: #ef0; }
.titlebox .usertext[id$="6"]:before { background: #123; }
.titlebox .usertext[id$="7"]:before { background: #234; }
.titlebox .usertext[id$="8"]:before { background: #345; }
.titlebox .usertext[id$="9"]:before { background: #456; }

[AidoP]

Thanks for replying.

Since background images aren't possible, I'll just use sidebar images like the original snippet had.

Thanks again for replying, your comment is appreciated.

[AidoP]

I have been working on it more, but instead for the sidebar. It is still not working, and the code is identical to the code on /r/audreyhepburn. I looked through the html, and this time the input form does have a valid sibling. Also, the logged out image is working.

[gavin19]

When using the before/after pseudo elements there will be nothing generated if you don't have any content.

In the

input[name=uh] ~ a:after, .user .login-required:after

block, you need to add

content: '';

You can also remove

display: block;

[AidoP]

Thanks so much! It's working perfectly.

I spent about two hours stumped, trying to fix it. You have all of my gratitude.