Backgrounds & Borders

.hero {
  background-color: #1e293b;  /* shows instantly, and if the image fails */
  background-image: url("/hero-banner.jpg");
}

.card {
  background-image:
    url("/pattern-overlay.png"),
    url("/photo-base.jpg");
  /* pattern-overlay.png renders ON TOP of photo-base.jpg */
}

.a { background-position: center; }              /* shorthand for "center center" */
.b { background-position: top right; }             /* keyword pairs */
.c { background-position: 20px 40px; }             /* offset from top-left corner */
.d { background-position: 50% 50%; }               /* percentage of the remaining space, not the element */

.hero {
  background-size: cover;
  /* scales the image to COMPLETELY fill the element, cropping whatever
     overflows — the single most common background-size value in real
     production CSS, used for full-bleed hero sections and card photos */
}

.logo-bg {
  background-size: contain;
  /* scales the image to fit ENTIRELY inside the element, preserving
     aspect ratio, with empty space left over if the ratios don't match
     — used when nothing may ever be cropped, e.g. a logo */
}

.tile {
  background-size: 200px 100px;   /* explicit width and height */
}

.icon {
  background-size: 50% auto;      /* one explicit, one auto-scaled to preserve ratio */
}

.default    { background-repeat: repeat; }     /* tiles in both directions — the default */
.no-repeat  { background-repeat: no-repeat; }   /* shows the image exactly once */
.repeat-x   { background-repeat: repeat-x; }    /* tiles horizontally only */
.repeat-y   { background-repeat: repeat-y; }    /* tiles vertically only */
.space      { background-repeat: space; }       /* repeats with even gaps, never cropping a tile */

.hero {
  background: url("/banner.jpg") center / cover no-repeat #1e293b;
  /*            image              position/size  repeat    color   */
}

/* Equivalent to writing all four properties separately: */
.hero-longhand {
  background-image: url("/banner.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: #1e293b;
}

.a {
  background: linear-gradient(#3b82f6, #1e3a8a);
  /* no direction given — defaults to "to bottom" */
}

.b { background: linear-gradient(to right, #3b82f6, #1e3a8a); }
.c { background: linear-gradient(to bottom right, #3b82f6, #1e3a8a); }  /* diagonal, corner to corner */
.d { background: linear-gradient(45deg, #3b82f6, #1e3a8a); }            /* precise angle, 0deg = to top */
.e { background: linear-gradient(135deg, #3b82f6, #1e3a8a); }

.rainbow {
  background: linear-gradient(
    to right,
    red 0%,
    orange 20%,
    yellow 40%,
    green 60%,
    blue 80%,
    violet 100%
  );
}

.brand-fade {
  background: linear-gradient(
    to right,
    #f97316 0%,
    #f97316 40%,   /* solid orange for the first 40% */
    transparent 100%
  );
}

.stripe {
  background: linear-gradient(
    to right,
    #f97316 0%,
    #f97316 50%,
    #1e293b 50%,   /* same position as the stop above = a hard edge, not a blend */
    #1e293b 100%
  );
  /* Two colors meeting at the exact same percentage produces a sharp
     line instead of a gradual blend — used constantly for diagonal
     "ribbon" banners and hard two-tone backgrounds. */
}

.a {
  background: radial-gradient(#3b82f6, #1e3a8a);
  /* an ellipse by default, centered, sized to reach the farthest corner */
}

.circle-spotlight {
  background: radial-gradient(
    circle at top left,
    rgba(255,255,255,0.3),
    transparent 60%
  );
  /* "circle" forces a true circle instead of an ellipse.
     "at top left" moves the center point away from the default center. */
}

.contained-glow {
  background: radial-gradient(
    circle closest-side,
    #facc15,
    transparent
  );
  /* closest-side stops the gradient exactly at the nearest edge,
     rather than stretching to the farthest corner (the default,
     farthest-corner) */
}

.a { border-radius: 8px; }                          /* all four corners */
.b { border-radius: 8px 16px; }                       /* top-left+bottom-right, top-right+bottom-left */
.c { border-radius: 8px 16px 8px 16px; }               /* all four, explicit, clockwise from top-left */
.d { border-radius: 50%; }                              /* a perfect circle, IF width equals height */
.pill { border-radius: 9999px; }                          /* larger than half the element = a full pill/capsule shape */

.blob {
  border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  /*              ^ horizontal radii, one per corner (TL TR BR BL)
                                        ^ vertical radii, one per corner (TL TR BR BL) */
}

/* A simpler, common real-world case — an elliptical "speech bubble" tail
   or an asymmetric decorative blob shape behind a hero image: */
.organic-shape {
  border-radius: 63% 37% 54% 46% / 43% 37% 63% 57%;
}

.card {
  box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.15);
  /*           ^    ^    ^    ^    ^
               |    |    |    |    color (with alpha for a soft edge)
               |    |    |    spread radius — grows/shrinks the shadow's SIZE
               |    |    blur radius — softens the shadow's EDGE
               |    vertical offset — positive = shadow falls downward
               horizontal offset — positive = shadow falls rightward */
}

.soft-edge {
  box-shadow: 0 4px 20px 0 rgba(0,0,0,0.2);
  /* blur: 20px, spread: 0 — a large, soft, feathered shadow that
     fades out gradually. The shadow's outer boundary is still roughly
     the size of the element, just blurred past that edge. */
}

.bigger-shadow {
  box-shadow: 0 4px 4px 10px rgba(0,0,0,0.2);
  /* spread: 10px, blur: 4px — the shadow's SHAPE itself grows 10px
     larger on every side before any blur is applied, then only a
     little softening is added. Produces a noticeably bigger, harder-
     edged shadow rather than a soft glow. */
}

.input-field {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
  /* the "inset" keyword flips the shadow to render INSIDE the border,
     giving the element a pressed-in, recessed appearance — extremely
     common on text inputs to visually suggest a "well" the cursor sits in */
}

.elevated-card {
  box-shadow:
    0px 1px 2px 0px rgba(0, 0, 0, 0.06),   /* tight, sharp — close contact shadow */
    0px 4px 8px 0px rgba(0, 0, 0, 0.08),    /* medium spread — mid-range depth */
    0px 12px 24px 0px rgba(0, 0, 0, 0.10);   /* wide, soft — ambient falloff */
}

/* A single box-shadow with a big blur value LOOKS similar at a glance,
   but reads as noticeably flatter and less "real" than three layered,
   progressively larger and softer shadows — this stacked technique is
   exactly what design systems like Material Design and most component
   libraries use under the hood for their elevation scale. */

A front-end engineer ships the new homepage hero section: a full-width banner photo of a model wearing the season's new jacket line, with the headline and CTA button overlaid on top. It looks perfect on the engineer's laptop. In design QA the next morning, a teammate on a wide ultrawide monitor reports the model's face is completely cropped out of frame — only the jacket and shoulders are visible.

.hero {
  height: 480px;
  background-image: url("/hero-model.jpg");
  background-size: cover;
  background-position: center;  /* the default center/center */
}

What is actually happening

The photo is a tall portrait shot with the model's face in the upper third. On a normal laptop viewport, cover crops a moderate amount evenly from top and bottom around the default centered position, and the face survives inside the crop. On a much wider ultrawide screen, the hero's aspect ratio becomes far more extreme — to fully cover that much wider box at the same 480px height, cover has to crop dramatically more off the top and bottom, and with the position still centered, the face (positioned above center in the source photo) is exactly what gets cut.

.hero {
  height: 480px;
  background-image: url("/hero-model.jpg");
  background-size: cover;
  background-position: top center;  /* anchor the crop to the top instead */
}

/* A more robust long-term fix the team adopts afterward: combine a
   readability gradient with the photo, and rely on background-position
   percentages tuned specifically to keep the subject's face in frame
   across the widest realistic viewport, verified in QA at 3440px width: */
.hero-v2 {
  height: 480px;
  background:
    linear-gradient(to bottom, rgba(0,0,0,0.15), rgba(0,0,0,0.45)),
    url("/hero-model.jpg") top center / cover no-repeat;
}

The team also adds a design QA checklist item specifically for any full-bleed background-size: cover photo: verify the crop at the narrowest supported width, the widest realistic width, and confirm background-position was deliberately chosen based on where the photo's actual subject sits — not left at the default center out of habit. This exact bug — a subject cropped out of frame on unusually wide or narrow viewports — is one of the most common visual QA findings for any hero-image- driven marketing page.