THIS WEEK'S JOB // Paint the walls: background colors and background images with readable text on top. (Book pages 177-185 in Mrs. Gaiser's book.)
THE THREE IDEAS
background-color paints the box
Every element is a box and its background fills it. Body's background paints the whole page behind everything.
Background images tile
An image background repeats by default like wallpaper. background-repeat and background-size tame it.
Text must survive the wall
A busy background eats words. If the text got harder to read, the background is wrong, no matter how cool it is.
TRY IT IN THE PAINT BOOTH
<style>
body { background-color: #0d0a1e; color: #eae6ff; }
.card { background-color: #171236; padding: 12px; }
</style>
<h1>Night Mode Shop</h1>
<div class="card">Readable words in a painted box.</div>OPEN THE PAINT BOOTH, PRELOADED »
ON YOUR LOT
Give your site a background color that fits your palette, and prove every word on every page still reads easily.