Adjust body > font-size and the margins on p:nth-child(2) and p:nth-child(3) to fit your own favorite text. If you change the background image, update the text in the < span > as well.
This is great...but in order to make it pass WCAG 2.0 AA (Criteria 1.1.1), you would need to expose what the image is to non-sighted users.
aria-description="background image of Willy Wonka smiling at Charlie"
Source: WCAG Guidelines
@MrGrigri If you look in the HTML you will see there is a <span> with the alternative text. I use CSS to clip it so it will be invisible but still announced to screen readers (you can test this with your favorite screen reader). There is no aria-description attribute, but if you meant aria-label then that would not work without also adding a role attribute to the <div> (Source: Short note on aria-label, aria-labelledby, and aria-describedby ). In other words, this passes 1.1.1.
YOU DID A HORRIBLE MISTAKE
font-family: "Impact", sans-serif;
@Raybe OMG YOU ARE RIGHT
(it was intentional, though; I wanted it to be consistent across platforms, though maybe I should have looked for a web version of Impact first)
Need to know how to enable it? Go here.