How to use the background-image property In SVG
The background-image property is used to set one or more background images to an element. We can also add the SVG content using this property and leave the content property empty. The other CSS properties help to position and size the content properly.
Example: In this example we are using the :before and :after pseudo-elements to insert SVG content before and after an element’s text content, respectively, adjusting their size with background properties.
<!DOCTYPE html>
<html>
<head>
<style>
.svg-demo {
text-align: center;
font-weight: bold;
font-size: 20px;
}
.text {
text-align: center;
}
/* Using the :before pseudo-element
to add the SVG content */
.svg-demo:before {
display: inline-flex;
content: '';
/* Using the background-image and
its related properties to add
the SVG content */
background-image: url('gfg_logo.svg');
background-size: 40px 40px;
height: 40px;
width: 40px;
}
/* Using the :after pseudo-element
to add the SVG content */
.svg-demo:after {
display: inline-flex;
content: '';
/* Using the background-image and
its related properties to add
the SVG content */
background-image: url('gfg_logo.svg');
background-size: 40px 40px;
height: 40px;
width: 40px;
}
</style>
</head>
<body>
<p class="svg-demo">
This is the normal content
</p>
<p class="text">
The SVG images are added before
and after the line using :before
and :after pseudo-elements
</p>
</body>
</html>
Output:
How to use SVG with :before or :after pseudo element ?
Using SVG with :before or :after pseudo-elements in CSS allows for the dynamic insertion of vector graphics into HTML elements. This technique enhances design flexibility by leveraging SVG’s scalability and interactivity while maintaining a clean HTML structure and reducing HTTP requests for image assets.:
Table of Content
- Using the background-image property
- Using the content property: