Light background (the best way)

When creating a fixed background image there are a few things to consider:

1. browser compatibility. Does that z-index work everywhere?
2. image size. Does this load fast enough on a 3G connection?
3. ease of change. What happens when the theme updates?

I found that the easiest way is to set the background-image property via the add-on CSS. That way it is “in between” the theme layer and the individual page. Adding an <IMG> is also possible straight from the content but it gives you z-index headaches. The content elements just don’t seem to go in front of the image element.

So on creativechoice.org I just added this 12k file stretched as the background of site-content:

.site-content {
 background-image: url("http://creativechoice.org/wp-content/uploads/2015/10/bkg.jpg");
 background-size: contain;
}

I hard-coded the opacity in the file. If you need more flexibility you could consider using the IMG-tag, however that might mean restructuring your HTML-structure to have all navigation elements (links) placed on top of it.