background — CSS Technical Interview Questions & Answers

Setting an element's background color, image and position.

background

  • Setting an element's background color, image and position.
  • background is a CSS property: it changes how a selected element looks or sits. You write it inside a rule: .card { background: …; }
  • Change one value, refresh, say what moved: colour, space, size, or stacking. That is how you learn properties — not by memorising the spec.
  • Trap: putting it on the wrong selector (parent vs child). Trap: px only on a phone page — learn rem/%/flex too when it is layout.
  • Box model reminder: width/height, padding, border, margin are different. If background is about space, draw the box.

Technical Interview Tip: background: one rule on .card, then say what changed.

Code Examples for background

background — working example

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

/* Shorthand */
.banner {
  background: #e2e8f0 url("/pattern.png") repeat-x left top;
}

background layers color and images; size/position/repeat control how the image fills the box.

How to Explain background to an Interviewer

What does background do?

A CSS property that changes look/layout Write it in a rule and refresh