Beginner LevelCSS & Modern Layouts
How do CSS background properties and gradients work?
❓ Interview Prompt: Explain background-image, background-size, background-position, and linear/radial gradients.
CSS background is a shorthand for controlling element backgrounds:
•
`background-color`: Solid fill color.
•
`background-image`: URL or gradient function.
•
`background-size`:
cover (fills, may crop), contain (fits, may leave gaps), or explicit dimensions.•
`background-position`: Anchors the image (
center, top right, etc.).•
`background-repeat`:
no-repeat, repeat, repeat-x.Gradients:
•
`linear-gradient(direction, color1, color2)`: Smooth blend along a line.
•
`radial-gradient(circle, color1, color2)`: Circular outward blend.
•
`conic-gradient(from angle, colors)`: Rotational sweep (pie charts).
Code Implementation Example
css
/* Hero with overlay gradient over image */
.hero {
background:
linear-gradient(to bottom, rgba(61,44,46,0.7), rgba(61,44,46,0.9)),
url('/hero-bg.jpg') center/cover no-repeat;
color: #f5edf0;
min-height: 60vh;
}
/* Subtle accent gradient */
.accent-bar {
background: linear-gradient(135deg, #3d2c2e, #886f68);
height: 4px;
}💡Overlay gradient on hero image and subtle accent gradient bar.
🎯 Interview Key Takeaway
Stack multiple backgrounds (gradient + image) using comma separation for overlay effects.
#Background#Gradients#Images#Beginner
Back to all CSS & Modern Layouts Questions→