Backgrounds – Images & Gradients

Background properties give a lot of power:

• background-image – URL, gradients (linear-gradient, radial-gradient).
• background-size – cover, contain, or explicit dimensions.
• background-position – center, top left, percentages.
• background-repeat – no-repeat, repeat-x, repeat-y.
• background-attachment – fixed for parallax effects.

---

Example: Gradient overlay on an image

.hero {
  background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url('hero.jpg');
  background-size: cover;
  background-position: center;
  color:#fff;
  padding:4rem 2rem;
}