Code360 powered by Coding Ninjas X Naukri.com. Code360 powered by Coding Ninjas X Naukri.com
Table of contents
1.
Introduction
2.
Pre-requisites
3.
Familiarity with Opacity
4.
Familiarity with position: relative and position: absolute
5.
Familiarity with Stacking and z-index
6.
Familiarity with the ::before and ::after Pseudo-elements
7.
Method 1: Opacity in CSS
7.1.
Example
8.
Method 2: Opacity using RGBA
8.1.
Example
9.
Method 3: Opacity on Background Images
9.1.
Example
10.
Method 4: Using CSS Pseudo-Elements
10.1.
Example
11.
Method 5: Positioning and Using a Separate Image Element
11.1.
Example
12.
Frequently Asked Questions
12.1.
Can you change the opacity of the background image in CSS?
12.2.
How do I dim the opacity of a background image in CSS?
12.3.
How do I make background opacity only in CSS?
12.4.
How do I fade opacity in CSS?
13.
Conclusion
Last Updated: Mar 27, 2024
Medium

CSS Background Image Opacity

gp-icon
Basics of javascript
Free guided path
10 chapters
68+ problems
gp-badge
Earn badges and level up

Introduction

Opacity is a CSS property that regulates an element's transparency. A range of adjustments can be made to background image opacity to enhance the page's design. Read the article to discover more about opacity.

CSS Opacity

The fundamental ideas of opacity and how it applies to the background images are covered in the article. Applying opacity to background pictures can be challenging without changing the child elements.

Pre-requisites

Exploring these topics will provide you with a clearer understanding of Image Opacity and facilitate its easy implementation.

  1. Familiarity with Opacity
  2. Familiarity with position: relative and position: absolute
  3. Familiarity with Stacking and z-index
  4. Familiarity with the ::before and ::after Pseudo-elements
Get the tech career you deserve, faster!
Connect with our expert counsellors to understand how to hack your way to success
User rating 4.7/5
1:1 doubt support
95% placement record
Akash Pal
Senior Software Engineer
326% Hike After Job Bootcamp
Himanshu Gusain
Programmer Analyst
32 LPA After Job Bootcamp
After Job
Bootcamp

Familiarity with Opacity

Handling opacity within CSS is a foundational skill for both web designers and developers. In simple terms, opacity denotes the degree of transparency or clarity exhibited by an element on a webpage. It is vital for augmenting a website's visual allure and functionality. You can fashion captivating effects by tuning the opacity of elements such as text, images, or background hues. For example, it becomes possible to render an image partially transparent, seamlessly integrating it with the background.

Also, hover effects can be employed to unveil concealed content. The opacity values in CSS span from 0(signifying completely transparent) to 1(signifying totally opaque). Proficiency in manipulating opacity ensures you can incorporate subtle accents into your essential information. This familiarity unlocks the door to imaginative design choices, including the creation of graceful overlays or transitions. All in all, the use of opacity in CSS is a valuable skill for the building of a visually appealing website.

Familiarity with position: relative and position: absolute

Being familiar with the CSS properties position: relative and position: absolute is fundamental for web developers. The position: relative allows an element to be positioned relative to its normal position in the document flow which makes it a valuable tool for fine-tuning layout. On the other hand, the position: absolute enables precise placement of an element relative to its closest positioned ancestor, which gives it precise control over its location. This is particularly useful for creating complex layouts and overlaying elements. Both these properties play essential roles in responsive web design, which allows for dynamic positioning and arrangement of elements on a webpage.

You can learn more about CSS positions here.

Familiarity with Stacking and z-index

Being familiar with stacking and z-index is crucial for web designers. Stacking refers to how elements are layered on a webpage. The z-index property allows you to control this layering by assigning a numerical value. The elements with higher z-index values appear above those with lower values. This is crucial for managing the visibility of overlapping elements, like pop-up menus or layered images. By effectively using the z-index property, designers can ensure that specific elements are precisely positioned in the foreground or background, which will enhance the overall user experience and visuals of the webpage.

You can learn more about z-index and stacking here.

Familiarity with the ::before and ::after Pseudo-elements

Becoming familiar with the ::before, and ::after pseudo-elements in CSS is essential for web designers. These elements act as virtual containers that allow you to insert content before or after the actual content of an HTML element. This feature is incredibly versatile, that enables the addition of decorative elements, icons, or textual content without altering the HTML structure. It's commonly used for creating custom bullet points, decorative borders, or even adding extra information to elements. The ::before and ::after pseudo-elements provide powerful tools for enhancing the design and functionality of web pages, which further offers creative flexibility to designers.

You can learn more about the pseudo elements here.

Method 1: Opacity in CSS

The opacity property in CSS describes how transparent an element is or how much the background behind the component is superimposed. The opacity of an element is marked on a scale of 0 to 1, where 0 means that the element is fully transparent, and 1 shows that the element is fully visible.

Example

<!DOCTYPE html>
<html>
    <head>
        <style>
            div { /* This style is applied to all the <div> tags */
                background-color: #d3ba55;
                padding: 10px;
                width: 50%;
                margin: 3px;
            }
            .first { /* First div is given the opacity of 0.2 */
                opacity: 0.1;
            }
            .second { /* Second div is given the opacity of 0.5 */
                opacity: 0.3;
            }
            .third { /* Third div is given the opacity of 0.7 */
                opacity: 0.6;
            }
        </style>
    </head>
    <body>
        <h1>Example of CSS opacity</h1>
<!-- Below are the four <div> tags, each having a particular opacity level  -->
        <div class="first">This div shows opacity of 0.2</div>
        <div class="second">This div shows opacity of 0.5</div>
        <div class="third">This div shows opacity of 0.7</div>
        <div>This div shows opacity of 1(default)</div>
    </body>
</html>

Output:

Css opacity example

The opacity property is used on the four <div> elements in the example above, each displaying a distinct opacity level.

Method 2: Opacity using RGBA

Like RGB, RGBA is a color system that contains values for red, green, and blue. The final component, "A," in RGBA, is alpha. The value of alpha is mainly changed to adjust color opacity. The alpha value ranges from 0.0 (completely transparent) to 1.0 (completely opaque).

Example

<!DOCTYPE html>
<html>
    <head>
        <style>
            div { /* This style is applied to all the <div> tags */
                padding: 10px;
                width: 50%;
                margin: 3px;
                background-color: rgba(211, 186, 85);
            }
            .first { /* First div is given the opacity of 0.2 */
                background-color: rgba(211, 186, 85, 0.2);
            }
            .second { /* Second div is given the opacity of 0.5 */
                background-color: rgba(211, 186, 85, 0.5);
            }
            .third { /* Third div is given the opacity of 0.7 */
                background-color: rgba(211, 186, 85, 0.7);
            }
        </style>
    </head>
    <body>
        <h1>Example of CSS opacity using RGBA</h1>
<!--  Below are the four <div> tags, each having a particular opacity level but that opacity will not be applied on child elements  -->
        <div class="first">This div shows opacity of 0.2</div>
        <div class="second">This div shows opacity of 0.5</div>
        <div class="third">This div shows opacity of 0.7</div>
        <div>This div shows opacity of 1(default)</div>
    </body>
</html>

Output:

CSS opacity rgba

The opacity property is applied to the backgrounds of all the div> elements in the example above, but the content displayed on them is unaffected.

Method 3: Opacity on Background Images

The background image is also given opacity in the same manner as discussed above. But there is no direct way to change the opacity of the background image of an element without affecting the child elements. The below example shows this limitation:

Example

<!DOCTYPE html>
<html>
    <head>
        <style>
            .con { /* Opacity is applied to the whole container; hence it will get applied to child elements too*/
                background-image: url("im2.jpg");
                color: white;
                width: 400px;
                height: 233px;
                opacity: 0.25;
            }
            p {
                padding: 30px 26px;
                font-size: 22px;
            }
        </style>
    </head>
    <body>
        <h2>Background image Opacity</h2>

        <div class="con">
            <p>Hello NINJA! WELCOME BACK</p>
        </div>
    </body>
</html>

Output:

Background image opacity

You can see that whenever we directly set the opacity of the background image then the child content is also affected. However, two methods exist to overcome this limitation for background images with opacity:

  • Using CSS Pseudo-Elements
  • Positioning and using a separate image element

Method 4: Using CSS Pseudo-Elements

The :before and :after pseudo-elements are used to set the opacity of only the background image. The background picture is inserted into a parent element's child element. This way, the background image, and the text content will be on their own "layer" in the parent. The opacity of each layer can then be adjusted without impacting the others. 

Example


<!DOCTYPE html>
<html>
    <head>
        <style>
            .outer_cont {
                position: relative;
            }
            .outer_cont:before { /* A pseudo element is created before outer_cont that will display the background image and its position property is set to absolute */
                content: " ";
                display: block;
                position: absolute;
                left: 0;
                top: 0;
                opacity: 0.35;
                width: 420px;
                height: 250px;
                background-image: url("im2.jpg");
            }
            .inner_cont { /* It is the child element of outer_cont, hence it’s position is set to relative */
                position: relative;
                top: 96px;
                font-size: 22px;
            }
        </style>
    </head>
    <body>
        <h2>Background image Opacity</h2>
        <div class="outer_cont">
            <div class="inner_cont">
                <p>Opacity applied on background-image only</p>
            </div>
        </div>
    </body>
</html>

Output:

Background image opacity

The parent outer_cont<div> establishes an absolute positioning containing block. The pseudo-element :before is set to position: absolute and is assigned an opacity of 0.35. As a result, the opacity of the content written on the image is not affected. 

Image Sampling

Method 5: Positioning and Using a Separate Image Element

This strategy will depend on two components. One of them is a "wrap" that offers a point of reference with relative positioning. The second is an image element with position: absolute that appears behind the content.

Example

<!DOCTYPE html>
<html>
    <head>
        <style>
            .outer_cont {
                overflow: hidden;
                position: relative;
            }
            .demo-bg { /* This style is applied to the background image */
                opacity: 0.35;
                position: absolute;
                left: 0;
                top: 0;
                width: 50%;
                height: auto;
            }
            .inner_cont { /* It is the child element of outer_cont, hence it’s position is set to relative */
                position: relative;
                height: 250px;
                top: 80px;
                left: 70px;
            }
        </style>
    </head>
    <body>
        <h2>Background image Opacity</h2>
        <div class="outer_cont">
            <img class="demo-bg" src="im2.jpg" alt="" />
            <div class="inner_cont">
                <h2>CSS opacity in Background</h2>
            </div>
        </div>
    </body>
</html>

Output:

Background Image opacity

The parent outer_cont <div> establishes an absolute positioning containing block. The demo-bg <img> is given the position: absolute and assigned an opacity of 0.35. As a result of the way the markup is organized, the inner_cont div> is set to position: relative and has a higher stacking context than demo-bg.

Check this out :  Versions of CSS

Frequently Asked Questions

Can you change the opacity of the background image in CSS?

Yes, you can change the opacity of a background image in CSS using the background-color property with RGBA values for the color.

How do I dim the opacity of a background image in CSS?

To dim the opacity of a background image in CSS, you can use the "::before" pseudo-element with a semi-transparent background color.

How do I make background opacity only in CSS?

You can make the background opacity in CSS by using the background-color property with RGBA values or the background property with a transparent color.

How do I fade opacity in CSS?

To fade opacity in CSS, use the opacity property, setting a value between 0(denoting completely transparent) and 1(denoting fully opaque) for the desired element.

Conclusion

This article explores the core concepts behind CSS opacity property, describing what opacity is, opacity usage with RGBA, opacity with background images, and finally, discussing some frequently asked questions in this field. We sincerely hope you enjoyed the piece and learned a lot about it. You can further refer to CSS gradients and CSS positions to have a better understanding of CSS.

For more information, refer to our Guided Path on Coding Ninjas Studio to upskill yourself in PythonData Structures and Algorithms, Competitive ProgrammingSystem Design, and many more! 

Head over to our practice platform, Coding Ninjas Studio, to practice top problems, attempt mock tests, read interview experiences and interview bundles, follow guided paths for placement preparations, and much more! 

Happy Learning Ninja!

Previous article
CSS Borders
Next article
CSS Layout
Guided path
Free
gridgp-icon
Basics of javascript
10 chapters
68+ Problems
gp-badge
Earn badges and level up
Live masterclass