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.

Type	Example	Description
Named Colors	color: red;	147 predefined color names
HEX Code	color: #ff0000;	Hexadecimal color value
RGB	color: rgb(255, 0, 0);	Red-Green-Blue combination
RGBA	color: rgba(255, 0, 0, 0.5);	RGB + Alpha (transparency)
HSL	color: hsl(0, 100%, 50%);	Hue, Saturation, Lightness
HSLA	color: hsla(0, 100%, 50%, 0.5);	HSL + Alpha transparency

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.

Value	Meaning
1	Fully opaque
0	Fully transparent
0.5	50% transparent

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;
}