How to Set Offset of Background Image from Right using CSS ?

CSS - How To Set Opacity Of Background Image?

Last Updated : 04 Jan, 2025

Here are the different ways to set the opacity of the background image

1. Using Opacity Property

The opacity property in CSS is a simple way to adjust the transparency of an element. You can set its value between 0 (completely transparent) and 1 (fully opaque).

Syntax

div {
  opacity: 0.5; /* Adjusts transparency for the entire element */
}

HTML

<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->

    <style>
        .element {
            width: 300px;
            height: 200px;
            background-image: url('https://media.geeksforgeeks.org/wp-content/uploads/20210313130410/exbg.png');
            opacity: 0.3;
            color: white;
            text-align: center;
            line-height: 200px;
        }
    </style>

<!--Driver Code Starts-->
</head>
<body>
    <h2 style="color: green;"> GeeksForGeeks</h2>
    <div class="element">
        Background Image with Opacity
    </div>
</body>
</html>
<!--Driver Code Ends-->

Output

OpacityofBackgroundImage — Using Opacity Property

2. Using Pseudo-elements

To make a background image transparent without affecting the element’s content, you can use pseudo-elements like ::before or ::after and apply the opacity property to them.

Syntax

selector::pseudo-element {
    property: value;
}

HTML

<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->

    <style>
        .element {
            width: 300px;
            height: 200px;
            background-image: url('https://media.geeksforgeeks.org/wp-content/uploads/20210313130410/exbg.png');
            opacity: 0.3;
            color: white;
            text-align: center;
            line-height: 200px;
        }
    </style>

<!--Driver Code Starts-->
</head>
<body>
    <h2 style="color: green;"> GeeksForGeeks</h2>
    <div class="element">
        Background Image with Opacity
    </div>
</body>
</html>
<!--Driver Code Ends-->

Output:

ImageOpacity — Using Pseudo-elements

How to Set Offset of Background Image from Right using CSS ?

D

devangj9689

Improve

Article Tags :

Similar Reads

How to Set Background Image in CSS?

CSS (Cascading Style Sheets) can allow developers to set the background image for the web pages or specific HTML elements. This feature can help enhance the visual aesthetics of the website. The background-image property in CSS can be used to specific one or multiple background images to be applied

How to set Background Image with opacity in Tailwind CSS?

Tailwind CSS is a utility-first approach to stylesheets that utilizes customized utility classes for styling. Although Tailwind officially supports setting the background image, there is no built-in class to directly set the background imageâ€™s opacity while keeping the opacity of the overlay content

How to Add Background Image in CSS?

The CSS background-image property is used to add an image as a background to an element.Syntaxbackground-image: url()1. Setting background Image of an ElementA background image is added to an h1 tag using the URL.HTML<h1 style="background-image: url( 'https://media.geeksforgeeks.org/wp-content/up

How to Set Offset of Background Image from Right using CSS ?

In this article, you can see the ways by which you can set the offset of a background image from the right using CSS. The approach solving involves the use of the CSS background positioning property of background-position. This property is essentially used to specify the space from which the backgro

How to Remove Background from image in CSS?

In modern web design, over 85% of websites use background manipulation to enhance visual appeal and layering. CSS offers several ways to remove or hide image backgrounds, such as using transparency, clipping, or masking techniques. This article will cover the most effective and up-to-date methods to

How to set multiple background images using CSS?

The multiple background images for an element can be put in the HTML page using CSS. Use CSS background property to add multiple background images for an element in any pattern and use other CSS property to set the height and width of the images. The used background property are listed below: backgr