CSS Colors & Backgrounds — Interview Questions & Answers

Ques: How are colors defined in CSS?

Ans: Colors in CSS can be defined in multiple formats, including names, HEX, RGB, RGBA, HSL, and HSLA.

Example:

h1 {
  color: rgb(34, 193, 195);
}
p {
  color: hsl(200, 100%, 40%);
}

Ques: What is the difference between RGB and HSL color models?

Model	Stands For	Based On	Example
RGB	Red, Green, Blue	Light intensity	`rgb(255, 100, 50)`
HSL	Hue, Saturation, Lightness	Color wheel	`hsl(10, 70%, 60%)`

Ques: What is opacity in CSS?

Ans: The opacity property sets the transparency level of an element, including its content.

Example:

img {
  opacity: 0.6;
}

Ques: What is the difference between opacity and RGBA/HSLA transparency?

Property	Affects	Applies To	Example
opacity	Entire element (including children)	Whole box	`opacity: 0.5;`
rgba()/hsla()	Only color	Specific property	`background-color: rgba(0,0,0,0.5);`

Ques: What is the background-color property used for?

Ans: background-color sets the background color of an element.

Example:

div {
  background-color: lightblue;
}

Ques: What is the background-image property?

Ans: background-image allows you to set an image as a background.

Example:

body {
  background-image: url("bg.jpg");
}

Ques: What are different background properties in CSS?

Property	Description
`background-color`	Sets background color
`background-image`	Sets background image
`background-repeat`	Controls image repetition
`background-position`	Sets the starting position
`background-size`	Scales background image
`background-attachment`	Fixed or scroll behavior
`background-origin`	Defines where background starts
`background-clip`	Controls painting area of background

Ques: Explain background-repeat property.

Value	Description
`repeat`	Repeats both horizontally & vertically (default)
`repeat-x`	Repeats horizontally
`repeat-y`	Repeats vertically
`no-repeat`	Displays once only

Example:

div {
  background-image: url("pattern.png");
  background-repeat: no-repeat;
}

Ques: What does background-size property do?

Value	Description
`auto`	Original size (default)
`cover`	Scales to cover the container
`contain`	Fits image inside container
`100% 100%`	Stretches to exact size

Example:

div {
  background-image: url("banner.jpg");
  background-size: cover;
}

Ques: What is background-position in CSS?

Ans: Defines where the background image is placed.

Example	Meaning
`background-position: top left;`	Align top-left
`background-position: center;`	Center image
`background-position: 50% 50%;`	Centered both ways

Ques: What is background-attachment used for?

Ans: It determines whether the background image scrolls with the page or stays fixed.

Value	Description
`scroll`	Moves with page scroll
`fixed`	Stays fixed in viewport
`local`	Scrolls with element content

Example:

body {
  background-image: url("bg.jpg");
  background-attachment: fixed;
}

Ques: What are multiple backgrounds in CSS?

Ans: You can add multiple background images by separating them with commas.

Example:

div {
  background-image: url("stars.png"), url("moon.png");
  background-position: center, right top;
  background-repeat: no-repeat, no-repeat;
}

Ques: What are gradients in CSS?

Ans: Gradients are smooth transitions between colors — created using CSS instead of images.

Type	Function	Example
Linear Gradient	`linear-gradient()`	`background: linear-gradient(to right, red, yellow);`
Radial Gradient	`radial-gradient()`	`background: radial-gradient(circle, blue, white);`
Conic Gradient	`conic-gradient()`	`background: conic-gradient(from 0deg, red, yellow, blue);`

Ques: What is background-clip in CSS?

Ans: Specifies where the background is drawn.

Value	Description
`border-box`	Default; extends under border
`padding-box`	Stops at padding edge
`content-box`	Only background behind content

Example:

div {
  background: yellow;
  background-clip: content-box;
  border: 5px solid black;
  padding: 20px;
}

Ques: What is mask-image in CSS?

Ans: mask-image hides parts of an element based on image transparency — like a stencil effect.

Example:

div {
  mask-image: url("mask.png");
  mask-size: cover;
}