Image Code
Background Image Code (Quick Reference)
A minimal quick-reference version — for the full interactive tool with sizing and position options, see the Background Image generator.
Live Tool
This is the fixed base pattern — visit Background Image for a live, adjustable version.
bg.css
Live
Preview
1How To Use
Follow these steps — no coding experience needed.
- Copy the base patternThree lines cover the most common case.
- Need more control?Use the full Background Image tool to adjust size and position live.
- Optimise the imageCompress background photos — they load on every visit.
2Example Output
What this code looks like once it's on a real page.
A quick pattern to keep on hand for hero sections and section dividers.
3Browser Compatibility
| Browser | Support | Notes |
|---|---|---|
| Chrome | ✓ Supported | Full support |
| Firefox | ✓ Supported | Full support |
| Safari | ✓ Supported | Full support |
| Edge | ✓ Supported | Full support |
| Opera | ✓ Supported | Full support |
| Mobile browsers | ✓ Supported | Full support, iOS & Android |
Supported in every current browser — Chrome, Firefox, Safari, Edge and Opera all render this identically, on both desktop and mobile.
→Related Pages
More tools that pair naturally with this one.