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

Here, we are going to learn how to set the background of a text or an image as transparent using CSS?
Submitted by Anjali Singh, on February 23, 2020


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.


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.


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.


	opacity : value;


<!DOCTYPE html>


        div {
            background-color: #f40;
            font-size: 40px;
            text-align: center;
            opacity: 0.5;
            color: #fff;

    <div>This is IncludeHelp</div>



set the background of a text

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

CSS Tutorial & Examples »



Comments and Discussions




Languages: » C » C++ » C++ STL » Java » Data Structure » C#.Net » Android » Kotlin » SQL
Web Technologies: » PHP » Python » JavaScript » CSS » Ajax » Node.js » Web programming/HTML
Solved programs: » C » C++ » DS » Java » C#
Aptitude que. & ans.: » C » C++ » Java » DBMS
Interview que. & ans.: » C » Embedded C » Java » SEO » HR
CS Subjects: » CS Basics » O.S. » Networks » DBMS » Embedded Systems » Cloud Computing
» Machine learning » CS Organizations » Linux » DOS
More: » Articles » Puzzles » News/Updates

© some rights reserved.