How to choose a background for your site.

The most common mistake is a beautiful background you cannot read text on. Three fixes, in order:

• Put your text over the calmest part of the image. Most backgrounds have a quiet area and a busy one. Headlines go on the quiet one.
• Add a subtle overlay. A gradient from transparent to roughly 40-60% black behind the text block lifts contrast without hiding the art. In CSS: background: linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,.15)), url(bg.webp);
• Check contrast. Body text wants about a 4.5:1 ratio against whatever sits behind it. The background sets the mood; the text still has to win.

Same background, both times. The only difference is the overlay. That is the whole trick.

A gorgeous background that adds two seconds to load costs you more conversions than it gains. Three habits:

• Serve the right size per screen. A 4K desktop hero (3840x2160) is wrong on a phone, it is huge and slow. Hand mobile a vertical 9:16 or a 1280-wide version and let the browser pick with srcset.
• Compress for web. Export the one you use as WebP or AVIF, it cuts the file 60-80% versus JPG at the same quality, and keeps your Core Web Vitals healthy.
• Lazy-load below the fold. Only the hero needs to load up front. Everything lower can wait.

The drop-in for a fast, responsive hero background:

<img src="bg-1280.webp"
     srcset="bg-768.webp 768w, bg-1280.webp 1280w, bg-2400.webp 2400w"
     sizes="100vw" alt="" loading="eager" />

Every Designer Vault pack ships in four ratios, so you always have the right shape for desktop, mobile, square and portrait. Drop in the matching size, compress it for the web, and you are done.

One design, the right crop for each screen. No stretching, no guessing.

• Stretching the wrong ratio. A desktop image squashed onto a phone looks cheap instantly. Use the size made for the screen.
• A background that fights the UI. If your buttons and copy are hard to find, the background is too busy. Calmer usually wins.
• The same flat default gradient. The free CSS gradient everyone uses reads as a placeholder. Texture, depth and one cohesive direction are what make a site look intentional.