What is a Background Image?
In CSS, the background image property is responsible for defining one or multiple images to use as backgrounds for an element. Another way to describe it is that by utilizing the background-image property, we can establish an image as the backdrop of an element.
In CSS, by default, a background image is positioned at the top-left corner and repeated in both the vertical and horizontal directions.
Syntax:
Let's examine the syntax for setting a background image in CSS:
Background-image: url(path-to-image) none| initial | inherit;
Here,
- URL : It helps us to specify the URL of the image.
- none: It is a default value where no image is displayed.
- Initial: It helps us to set the property to its default value.
- Inherit: It also helps us to inherit the property from its parent elements.
Introduction to Linear Gradient
By employing a linear gradient, we have the ability to generate an illustration that features a gradual shift between multiple colors along a linear path. Within a linear gradient, the color smoothly transitions in a specified direction, whether it be from top to bottom, left to right, or at any customized angle.
Syntax
If you intend to generate a linear gradient, it is essential to specify a minimum of two color stops. By utilizing these specified colors, a smooth transition is established between them. This gradient is typically defined within the background or background-image properties.
Background: linear-gradient (direction, colour-stop1, colour-stop2, ....);
If a direction is not specified, the default transition will proceed from top to bottom.
How to Use Linear Gradients in Background Images
By leveraging CSS linear gradients, we have the ability to generate a backdrop with the characteristics of a linear gradient that incorporates a minimum of two color stops. It is feasible to apply these gradients to the upper section of a background image by merging the URL of the background image with the gradient attributes.
Example
Let's consider an instance to grasp the utilization of linear gradients in the background color through CSS:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="without-gradient">without gradient</div>
<div id="gradient">with gradient</div>
</body>
</html>
#without-gradient{
background-image: url(images/balance-110850_640.jpg);
width: 50%;
height: 200px;
background-size: cover;
color: red;
padding: 20px;
}
#gradient{
background-image: linear-gradient(to bottom, rgba(245, 246, 252, 0.52), rgba(117, 19, 93, 0.73)), url(images/balance-110850_640.jpg);
width: 50%;
height: 200px;
background-size: cover;
color: red;
padding: 20px;
}
Output:
Why Should You Use Linear Gradients in Background Images?
Employing linear gradients in background images provides numerous benefits within CSS:
Smooth Transition
By employing linear gradient properties, we have the capability to generate seamless shifts between colors, enabling us to attain understated and aesthetically pleasing outcomes. This feature assists in crafting gradients that seamlessly merge with additional design components within a webpage or application interface.
Customization
It also offers extensive customization options. We have the ability to manage the orientation, slope, and even the color scheme of the gradient to attain the intended visual impact. This tool grants us versatility, enabling the creation of backgrounds that harmonize flawlessly with our website's design.
Performance
By utilizing linear gradients in CSS, we can produce improved outcomes without the need for extra HTTP requests to fetch image files. Implementing this technique can enhance loading speed, particularly beneficial for users on devices with limited internet connectivity.
Scalability
Linear gradients are adaptable, allowing them to adjust to a variety of screen sizes and resolutions while maintaining quality. This feature makes them well-suited for responsive web design, ensuring that backgrounds can seamlessly accommodate different viewport sizes across various devices.
Accessibility
When employing a linear gradient as the background image, we enhance accessibility by guaranteeing adequate color contrast between text and background components. This is crucial for readability, particularly for individuals with visual impairments.
In brief, linear gradients provide a flexible and effective method for generating visually attractive backdrops for websites and applications, all while delivering advantages in terms of speed and inclusivity.
Examples
Left to Right
A basic code snippet that applies a linear gradient horizontally over a background image.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="gradient">linear gradient left to right</div>
</body>
</html>
#gradient{
background-image: linear-gradient(to right, rgba(16, 16, 17, 0.52), rgba(238, 12, 181, 0.73)), url(images/balance-110850_640.jpg);
width: 50%;
height: 200px;
background-size: cover;
color: red;
padding: 20px;
}
Output:
Diagonal Gradient
In CSS, it is possible to create a diagonal gradient transition by defining the starting positions both horizontally and vertically, like top-left or bottom-right.
Let's consider a basic instance of a linear gradient that initiates from the upper-left corner:
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="gradient">Diagonal Linear Gradient </div>
</body>
</html>
#gradient{
background-image: linear-gradient(to bottom right, rgba(16, 16, 17, 0.82), rgba(238, 12, 181, 0.70)), url(images/balance-110850_640.jpg);
width: 50%;
height: 200px;
background-size: cover;
color: red;
padding: 20px;
}
Output:
Using an angle to specify the direction of the linear gradient
We can further enhance precision by indicating the gradient direction using angles.
Syntax
The syntax of the angle gradient is as follows:
Definition: linear-gradient (angle, color-stop1, color-stop2);
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="gradient">Angle Linear Gradient </div>
</body>
</html>
#gradient{
background-image: linear-gradient(90deg , rgba(32, 241, 241, 0.82), rgba(38, 238, 12, 0.7)), url(images/balance-110850_640.jpg);
width: 50%;
height: 200px;
background-size: cover;
color: red;
padding: 20px;
}
Output: