Adding a background pattern or image to a website makes it more visually appealing and creates a strong brand impression. But we don’t want the background image to be too distracting, especially when text is overlaid on top. In this case, we can apply a transparent effect to the background image to make it less distracting and the text more readable.
This blog post explores how to create a transparent effect using different CSS techniques and Cloudinary’s opacity transformation feature.
You’ll learn:
- How to set up the page.
- How to create transparency with the CSS
opacityproperty. - How to use the
backgroundproperty. - The drawbacks of using the CSS
opacityproperty. - Transparent backgrounds with Cloudinary’s
opacitytransformation.
Our goal is to create a simple page that contains these elements:
- A website background from an image, with a transparency effect of 50%.
- A heading text.
- A small paragraph text below the heading text.
Our HTML code will look like this:
<body>
<div class="background">
<img src="https://res.cloudinary.com/mayashavin/image/upload/v1702370398/Hippopy/Arts/ninja_assassin" class="background-image">
<main class="content">
<h1 class="heading">Some text heading</h1>
<p class="paragraph">Some text paragraph</p>
</main>
</div>
</body>
With the following CSS stylings:
.background-image {
width: 500px;
}
.content {
padding: 20px 0px;
margin: auto;
display: block;
text-align: center;
}Code language: HTML, XML (xml)At this point, the browser will display the page with the background image and the text elements as follows:
To make the image appear behind the text elements as background, we’ll perform the following on the CSS selector .background-image:
- Set the
positionproperty toabsolute. - Set the
z-indexproperty to-1. - Set `width` to cover the whole page (
100%).
.background-image {
position: absolute;
width: 100%;
z-index: -1;
}Code language: CSS (css)By doing so, you take the img element out of the standard page flow and position it relatively to one of its closest positioned ancestors (in this case, body). The z-index property specifies the stack order of the element, and a value of -1 indicates placing the element behind the text elements.
At this point, our page will look like this:
Though the text contrast looks good, the background image’s color is too intense and distracting. Let’s make it more transparent!
The most straightforward way to create transparency is using the CSS opacity property. The syntax is opacity: [value];. The value can be between 0 (fully transparent) and 1 (fully opaque). In our demo, let’s set the opacity property to 0.5:
.background-image {
//...
opacity: 0.5;
}Code language: JavaScript (javascript)With this change, the browser will display the background image with 50% transparency, as shown in the screenshot below:
The image looks better, but there is one problem with our current approach of using the img element for the background image. We need it to be responsive, i.e., it should resize itself to fit the screen size or the page’s content. Unfortunately, the img element doesn’t resize itself automatically, and we may need to set the width property to 100% or height to 100% to make it responsive.
However, doing so will cause the image to stretch and look distorted. So let’s explore a better way to create a responsive background image with a transparency effect.
Instead of using the img element, we can use the CSS background property to set the background image of a component. We’ll change our img to an empty div as follows:
<body>
<div class="background">
<div class="background-image"></div>
<!--...-->
</div>
Add the following CSS rules to `.background-image`:
.background-image {
//...
width: 100%;
height: 100%;
background: url(https://res.cloudinary.com/mayashavin/image/upload/v1702370398/Hippopy/Arts/ninja_assassin) center;
background-size: contain;
}Code language: JavaScript (javascript)The value contain for background-size specifies that the background image should be scaled as large as possible while ensuring its dimensions are less than or equal to the corresponding width and height of the background positioning area. By default, the browser will repeat the background image to fill the space left during the background scaling. Our background now becomes:
With this, we can ensure the background image will always be responsive and fit the screen size without stretching out of its original size.
But is using the opacity property the ideal way to create transparent background images, or is there another way?
The CSS opacity property is a great way to create a transparency effect on an element. Its drawback is that it affects the entire element, which means it also counts any nested elements.
In our demo, we separated the background image div and the main content into two sibling elements. We used CSS positioning and stacking order as the workaround to have one displayed behind another, keeping the complete opacity of content in main. If we wrap the `main` within div.background-image, the entire main content will inherit the opacity property of .background-image, as shown in the screenshot below:
Since the background-opacity property in CSS only allows us to apply the transparency effect to the background image, we used a workaround solution of combining CSS positioning and stacking order, which is the best CSS-only solution.
Or, if we want something just as easy but with far more flexibility, we can use Cloudinary’s opacity transformation.
Cloudinary’s opacity transformation allows us to create a variant of our image with the desired opacity effect on the fly. To do so, we can add the o_<opacity-level> parameter to the image’s Cloudinary URL after /upload/, where <opacity-level> is a number between 0 (fully transparent) and 100 (fully opaque).
Let’s take our demo URL image and add the o_50 parameter as 50% transparency to it and safely remove CSS opacity, position, and z-index from .background-image, as follows:
.background-image {
width: 100%;
height: 100%;
background: url(https://res.cloudinary.com/mayashavin/image/upload/o_50/v1702370398/Hippopy/Arts/ninja_assassin) center;
background-size: contain;
}Code language: CSS (css)Now, we can have the `main` content nested within `div.background-image` without worrying about the transparency effect applied to it.
<div class="background">
<div class="background-image">
<main class="content">
<h1 class="heading">Some text heading</h1>
<p class="paragraph">Some text paragraph</p>
</main>
</div>
</div>Code language: HTML, XML (xml)That’s all it takes. The output will be similar to our CSS workaround but with less code:
We learned that the CSS opacity property isn’t the best solution for creating a transparent background image without other CSS properties like position, stack order z-index, and a proper HTML structure. An excellent alternative is combining the dynamic opacity transformation on the URL of Cloudinary images with the correct CSS background property, creating a transparent background image with less code.
Enhance your website’s visuals using Cloudinary’s transformations to create striking, engaging imagery. Sign up for free today.
