Layered backgrounds (CSS)

I used this to include “avatars” in various passages of my Infectious Storytelling game:

In the Stylesheet, define the background as usual for the passages. Then add:

/* add another layer of background image to passages tagged “dorothy") */
body.dorothy {
  background-image: url("dorothy.png"), url("bg.jpg");
  background-repeat: no-repeat, no-repeat;
  background-position: right bottom;
  background-size: 30%, 100% 100%;
  font-family: 'Asul', sans-serif;
  font-size: 120%;
  color: #0e1a16;
}

/* add another layer of background image to passages tagged “dorothy") */
body.dorothy {
  background-image: url("dorothy.png"), url("bg.jpg");
  background-repeat: no-repeat, no-repeat;
  background-position: right bottom;
  background-size: 30%, 100% 100%;
  font-family: 'Asul', sans-serif;
  font-size: 120%;
  color: #0e1a16;
}

• “.dorothy”:  tells it to only use this background in passages tagged “dorothy”.
• “background-image”: place the url for each image in descending order (i.e., the one listed first will be on the top, the one listed last will be on the bottom).
• Other “background-“ elements: define these in the same order as the “background-image”.
• “background-position”: for some reason, it only worked if I ONLY defined the position for the avatar, not the wallpaper. (Maybe because the wallpaper was at 100% width and height, positioning didn’t matter, and it interfered.)
  • For some, I could use “right bottom”, which placed it in the bottom right-hand corner.
  • For others, I had to use x y percentages, replacing “right bottom” with “86% 100%” (see below link on how these work).
  • More on this property here.