# Backgrounds, Borders & Shadows — CSS

Source: https://www.geekswithgeeks.com/en/css/css-backgrounds-shadow

> Fill, frame, and lift elements off the page.

## 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.

```css
.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.

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