Backgrounds, Borders & Shadows

Background properties

background-color a flat fill, background-image: url(...), background-size: cover scales to fill the box, background-position aligns it.

A hero background

cover crops the image to fill the box without distorting it.

.hero {
  background-image: url("hero.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

border-radius & box-shadow

border-radius rounds corners (50% makes a circle on a square box). box-shadow: offsetX offsetY blur spread color draws a soft shadow.

A raised card

Small blur + low opacity keeps shadows looking natural.

.card {
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}