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
opacity
property. - How to use the
background
property. - The drawbacks of using the CSS
opacity
property. - Transparent backgrounds with Cloudinary’s
opacity
transformation.
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
position
property toabsolute
. - Set the
z-index
property 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.