Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Setting Background Image using CSS
The CSS background-image property is used to set an image as a background for the selected element. The url() function is used in the background-image property to specify the image source.
Syntax
selector {
background-image: value;
}
Possible Values
| Value | Description |
|---|---|
| url('URL') | The image URL source |
| linear-gradient() | Creates a linear gradient as background |
| radial-gradient() | Creates a radial gradient as background |
| conic-gradient() | Creates a conic gradient as background |
| repeating-linear-gradient() | Repeats a linear gradient pattern |
| repeating-radial-gradient() | Repeats a radial gradient pattern |
| repeating-conic-gradient() | Repeats a conic gradient pattern |
Example: Basic Background Image
This example shows how to set a background image for a div element −
<!DOCTYPE html>
<html>
<head>
<style>
.image-container {
width: 400px;
height: 200px;
background-image: url("https://www.tutorialspoint.com/servlets/images/servlets.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
border: 2px solid #333;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 18px;
text-shadow: 1px 1px 2px black;
}
</style>
</head>
<body>
<div class="image-container">
Background Image Example
</div>
</body>
</html>
A div container with a background image displaying "Background Image Example" text centered over the image.
Example: Background Image for Headings
You can also apply background images to heading elements −
<!DOCTYPE html>
<html>
<head>
<style>
.header {
background-image: url("https://www.tutorialspoint.com/hibernate/images/hibernate-patterns.jpg");
background-size: cover;
background-position: center;
padding: 30px;
color: white;
text-align: center;
font-size: 36px;
text-shadow: 2px 2px 4px black;
}
.content {
padding: 20px;
background-color: #f4f4f4;
margin: 10px;
}
</style>
</head>
<body>
<h1 class="header">Welcome to TutorialsPoint</h1>
<div class="content">
This is a demonstration of background image applied to a heading element.
</div>
</body>
</html>
A heading with a background image showing "Welcome to TutorialsPoint" in white text with shadow, followed by content in a light gray container.
Example: Linear Gradient with Background Image
You can combine gradients with background images to create overlay effects −
<!DOCTYPE html>
<html>
<head>
<style>
.hero-section {
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
url("https://www.tutorialspoint.com/assets/profiles/123055/profile/200_187394-1565938756.jpg");
height: 300px;
background-size: cover;
background-position: center;
display: flex;
align-items: center;
justify-content: center;
color: white;
text-align: center;
}
.hero-content h2 {
font-size: 32px;
margin: 0 0 10px 0;
}
.hero-content p {
font-size: 18px;
margin: 0;
}
</style>
</head>
<body>
<div class="hero-section">
<div class="hero-content">
<h2>Learn CSS Background Images</h2>
<p>Master the art of web design with background images</p>
</div>
</div>
</body>
</html>
A hero section with a background image overlaid with a dark semi-transparent gradient, displaying centered white text with the heading and subtext.
Conclusion
The background-image property is versatile for adding visual appeal to elements. Use url() for images and gradient functions for colorful backgrounds. Combine with properties like background-size and background-position for better control.
Updated on: 2026-03-15T14:06:03+05:30
854 Views
Advertisements