The background-image property lets you place images and gradients behind an element’s content. It is one of the most useful tools for hero sections, cards, textures, and decorative backgrounds.
Use url() for files.
Linear and radial fills.
Stack backgrounds.
No image by default.
size, repeat, position.
Combine with background-color.
The background-image CSS property sets one or more background images for an element. The image is painted behind the content, borders, and padding according to other background properties.
You can use regular image files with url(), CSS gradients, or several layered backgrounds separated by commas. This makes it possible to build rich visual designs without extra HTML elements.
Start with a simple linear-gradient(). Once that works, try background-size and background-repeat to control how the image fits the element.
Apply background-image using a single image value or a comma-separated list:
selector {
background-image: <image>;
}.hero {
background-image: url("hero.jpg");
background-size: cover;
background-position: center;
}.panel {
background-image:
linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.45)),
url("photo.jpg");
}none.background-image.background-size, background-repeat, and background-position to control layout.background-color fills any transparent areas behind the image.| Question | Answer |
|---|---|
| Initial value | none |
| Applies to | All elements |
| Inherited | No |
| Animatable | No |
| Common use | Hero banners, textures, gradients, photo backgrounds |
The initial value of background-image is none. That means no background image is painted unless you set one explicitly.
These are the most common background-image values beginners use.
| Value | Example | Meaning |
|---|---|---|
none | background-image: none; | No background image is applied |
url() | background-image: url("photo.jpg"); | Loads an image file as the background |
linear-gradient() | background-image: linear-gradient(135deg, #2563eb, #9333ea); | Creates a straight color transition |
radial-gradient() | background-image: radial-gradient(circle, #38bdf8, transparent); | Creates a circular or elliptical gradient |
| Repeating gradients | background-image: repeating-linear-gradient(45deg, #fde68a, #fde68a 10px, #f59e0b 10px 20px); | Creates a repeating pattern effect |
| Multiple layers | background-image: linear-gradient(...), url("photo.jpg"); | Stacks more than one background layer |
linear-gradient()Great for hero sections, buttons, and smooth color transitions.
Very common in modern CSS layouts.
url()Uses image files such as JPG, PNG, SVG, or WebP.
Pair with background-size: cover;
radial-gradient()Useful for spotlight, glow, and circular highlight effects.
Works well on dark backgrounds.
repeating-*Creates stripes, grids, and other repeating patterns.
No image file required.
noneThe default value. Only background-color shows if set.
Removes a background image.
background-image vs background-color| Property | Paints | Best for |
|---|---|---|
background-image | Images, gradients, and layered backgrounds | Hero photos, textures, decorative fills |
background-color | A solid color behind the content | Simple panels, cards, and fallback fills |
These panels use different background-image values:
Gradients and patterns are valid background images, not just photo files.
Try background-image with linear gradients, radial gradients, url() images, and multiple layered backgrounds.
Gradients are one of the easiest ways to start learning background-image.
Create a colorful hero section using a straight gradient background.
.hero {
background-image: linear-gradient(135deg, #2563eb, #9333ea);
background-size: cover;
min-height: 70vh;
}The browser treats the gradient as an image and paints it behind the hero content.
Use a radial gradient to create a soft glow effect on a dark section.
.card {
background-color: #0f172a;
background-image: radial-gradient(circle at top, #38bdf8, transparent 55%);
}The radial gradient fades from a bright center color to transparent, creating a spotlight over the dark base color.
Use url() for real image files and stack multiple background layers when needed.
Load an image file as the element background and control its size with background-size.
.background-example {
width: 300px;
height: 200px;
background-image: url("example.jpg");
background-size: cover;
}The browser loads the image from the path inside url() and paints it behind the element. Use background-size: cover; to fill the box cleanly.
Stack an overlay gradient on top of another gradient for richer hero sections.
.hero {
background-image:
linear-gradient(rgba(15, 23, 42, 0.55), rgba(15, 23, 42, 0.55)),
linear-gradient(135deg, #0ea5e9, #6366f1);
background-size: cover;
}The first background layer is painted on top. Here, the dark overlay softens the colorful gradient beneath it.
background-image WorksUse url(), a gradient function, or multiple comma-separated layers.
The image appears in the element’s background area, underneath text and child elements.
Use background-size, background-repeat, and background-position to control fit and placement.
You can create hero banners, textures, overlays, and decorative sections with CSS alone.
background-image is supported in all modern browsers, including gradients and multiple background layers.
Chrome, Firefox, Safari, Edge, and Opera all support url(), gradients, and layered backgrounds.
If an image fails to load, the browser can still show background-color behind the element.
Bottom line: Use background-image confidently, and always provide a sensible fallback color when using photo backgrounds.
The background-image property is a flexible way to add visual interest to your layouts. You can use photo files, gradients, repeating patterns, and multiple layered backgrounds to build modern designs with CSS.
Start with a simple gradient, then explore url(), layered overlays, and companion properties like background-size and background-position.
background-color behind photo backgroundsbackground-size: cover; for full-area hero imagesbackground-image with background-colorbackground-imageUse these points when adding images and gradients to your layouts.
Photos, gradients, patterns.
PurposeValid background images.
ValuesComma-separated list.
LayersNo image unless set.
Defaultsize, repeat, position.
LayoutOpen the HTML editor, add gradients and background images, and preview the result instantly.
5 people found this page helpful