Charlotte the Useless Ghost

you guys seem to really like css crimes like this, or this:

and a few people have asked me how i did that. it's really easy, so here's a small tutorial:

to start, you need two images: the main image and the background image. the background image should either be a texture that loops, or a really tall image, because it needs space to scroll. the main image just needs transparency where the background should appear:

the code itself is also pretty simple:

<img src="[main image URL]" style="
  width: 100%;
  margin: 0px;
  background: url([background image URL]);
  background-size: contain;
  background-position: center;
  background-attachment: fixed;
">

just insert the image URLs in there, and you're pretty much good to go! you might want to adjust the size and position, as well as the attachment way to tweak the appearance. mozilla's MDN has some helpful articles about them:

• background-size on MDN
• background-position on MDN
• background-attachment on MDN

usually you're fine with the properties in the example, but sometimes you need to adjust a few things, for example the background-size if you want to use a repeating texture. if you're unsure which one is the right one: fuck around and find out! just mess around with them until it works :3