How to set the background of a text or an image as transparent using CSS?

CSS Image Opacity / Transparency: In this tutorial, we will learn how to set the background of a text or an image as transparent using CSS. By Anjali Singh Last updated : July 11, 2023

Introduction

In web development, there are numerous ways by which we can style our websites or web pages. You can make use of lots of properties for creating attractive and responsive websites.

Styling is very important for any website or web page. If your web page or website is not styled properly then there are chances that the audience would not like to go through your website or web page and if you have created a website or web page with good styling, then there are chances that your website or web page will draw a lot of attention.

Styling goes hand in hand while developing a web page or a website. You should dedicate as much time as you can while styling your website or web page. If you are just a beginner then you might face some problems when it comes to styling as initially, no one is aware of so many properties. So to be a good professional developer, you will need to learn as many properties as possible. When you have an abundance of knowledge about various properties then you will be able to style websites or web pages very swiftly and easily.

Here, in this article, we are going to discuss one aspect of styling the websites or web pages. From this article, you will learn how you can make the background of an image or a text as transparent.

So, let us move on with the next section.

Setting the background of a text or an image as transparent using CSS

For setting the background of an image or a text as transparent you will have to make use of a certain property. This property is known as opacity. To achieve what you desire your opacity is the most crucial property at play. Before, we learn how we can set the background as transparent using this property. First, let us get familiar with the opacity property.

CSS opacity property

The opacity is a property that would help in making any element as transparent or opaque or slightly translucent. You can make us of opacity property on any element. The scale of opacity property ranges from 0 to 1, where 0 is defined as completely transparent and 1 is defined as completely opaque.

Now that we are familiar with the opacity property, let us discuss the solution now.

Syntax:

element{
	opacity : value;
}

CSS example to set the background of a text or an image as transparent

<!DOCTYPE html>

<html>

<head>
    <style>
        div {
            background-color: #f40;
            font-size: 40px;
            text-align: center;
            opacity: 0.5;
            color: #fff;
        }
    </style>
</head>

<body>
    <div>This is IncludeHelp</div>
</body>

</html>

Output

In the above example, the opacity is set to 0.5.

CSS Examples »

How to horizontally center a DIV using CSS?

How to set the sticky footer at the bottom of a webpage using CSS?