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. <\/p>\n\n\n\n
This blog post explores how to handle CSS background image opacity to create a transparent effect using different HTML techniques. Plus as a bonus, you\u2019ll learn how Cloudinary\u2019s free opacity transformation feature makes working with background image opacity even easier.As we discuss ways to set background image opacity in CSS we\u2019ll cover:<\/p>\n\n\n\n
You\u2019ll learn:<\/p>\n\n\n\n
opacity<\/code> property.<\/li>\n\n\n\n- How to use the
background<\/code> property.<\/li>\n\n\n\n- The drawbacks of using CSS background image opacity.<\/li>\n\n\n\n
- Transparent backgrounds with Cloudinary\u2019s
opacity<\/code> transformation.<\/li>\n<\/ul>\n\n\n\nSetting Up the Page<\/strong><\/h2>\n\n\n\nOur goal is to create a simple page that contains the following html background image opacity elements:<\/p>\n\n\n\n
\n- A website background from an image, with a transparency effect of 50%.<\/li>\n\n\n\n
- A heading text.<\/li>\n\n\n\n
- A small paragraph text below the heading text.<\/li>\n<\/ul>\n\n\n\n
Our HTML code will look like this:<\/p>\n\n\n
<body<\/span>><\/span>\n\n\u00a0\u00a0\u00a0<div<\/span> class<\/span>=\"background\"<\/span>><\/span>\n\n\u00a0\u00a0\u00a0\u00a0<img<\/span> src<\/span>=\"https:\/\/res.cloudinary.com\/mayashavin\/image\/upload\/v1702370398\/Hippopy\/Arts\/ninja_assassin\"<\/span> class<\/span>=\"background-image\"<\/span>><\/span>\n\n\u00a0\u00a0\u00a0\u00a0<main<\/span> class<\/span>=\"content\"<\/span>><\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<h1<\/span> class<\/span>=\"heading\"<\/span>><\/span>Some text heading<\/h1<\/span>><\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<p<\/span> class<\/span>=\"paragraph\"<\/span>><\/span>Some text paragraph<\/p<\/span>><\/span>\n\n\u00a0\u00a0\u00a0\u00a0<\/main<\/span>><\/span>\n\n\u00a0\u00a0<\/div<\/span>><\/span>\n\n<\/body<\/span>><\/span>\n\nWith the following CSS stylings:\n\n.background-image {\n\nwidth: 500px;\n\n}\n\n.content {\n\npadding: 20px 0px;\n\nmargin: auto;\n\ndisplay: block;\n\ntext-align: center;\n\n}<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\nAt this point, the browser will display the page with the background image and the text elements.<\/p>\n\n\n\n
To make the image appear behind the text elements as background, we\u2019ll perform the following on the CSS selector .background-image<\/code>:<\/p>\n\n\n\n\n- Set the
position<\/code> property to absolute<\/code>.<\/li>\n\n\n\n- Set the
z-index<\/code> property to -1<\/code>.<\/li>\n\n\n\n- Set `width` to cover the whole page (
100%<\/code>).<\/li>\n<\/ul>\n\n\n.background-image<\/span> {\n\n\u00a0\u00a0\u00a0\u00a0position<\/span>: absolute;\n\n\u00a0\u00a0\u00a0\u00a0width<\/span>: 100%<\/span>;\n\n\u00a0\u00a0\u00a0\u00a0z-index<\/span>: -1<\/span>;\n\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\nBy doing so, you take the img<\/code> element out of the standard page flow and position it relatively to one of its closest positioned ancestors (in this case, body<\/code>). The z-index<\/code> property specifies the stack order of the element, and a value of -1<\/code> indicates placing the element behind the text elements.<\/p>\n\n\n\nThough the text contrast looks good, the background image’s color is too intense and distracting. Let’s make it more transparent!<\/p>\n\n\n\n
Creating Transparency With the CSS Background Image opacity<\/code> Property<\/h2>\n\n\n\nThe most straightforward way to create transparency is using the CSS opacity<\/code> property. The syntax is opacity: [value];. The value<\/code> can be between 0 (fully transparent) and 1 (fully opaque). In our demo, let’s set the opacity<\/code> property to 0.5<\/code>:<\/p>\n\n\n.background-image {\n\n\u00a0\u00a0\u00a0\u00a0\/\/...<\/span>\n\n\u00a0\u00a0\u00a0\u00a0opacity<\/span>: 0.5<\/span>;\n\n}<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\nWith this change, the browser will display the background image<\/a> with 50% transparency.<\/p>\n\n\n\nThe image looks better, but there is one problem with our current approach of using the img<\/code> 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<\/code> element doesn\u2019t resize itself automatically, and we may need to set the width<\/code> property to 100%<\/code> or height<\/code> to 100%<\/code> to make it responsive. <\/p>\n\n\n\nHowever, doing so will cause the image to stretch and look distorted. So let\u2019s explore a better way to create a responsive background image with a transparency effect.<\/p>\n\n\n\n
Using the background<\/code> Property<\/strong><\/h2>\n\n\n\nInstead of using the img<\/code> element, we can use the CSS background<\/code> property to set the background image of a component. We\u2019ll change our img<\/code> to an empty div<\/code> as follows:<\/p>\n\n\n<body>\n\n\u00a0\u00a0\u00a0<div<\/span> class<\/span>=\"background\"<\/span>><\/span>\n\n\u00a0\u00a0\u00a0\u00a0<div<\/span> class<\/span>=\"background-image\"<\/span>><\/span><\/div<\/span>><\/span>\n\n\u00a0\u00a0\u00a0\u00a0<!--...--><\/span>\n\n\u00a0\u00a0<\/div<\/span>><\/span><\/span>\n\nAdd the following CSS rules to `.background-image`<\/span>:\n\n.background-image {\n\n\u00a0\u00a0\u00a0\u00a0\/\/...<\/span>\n\n\u00a0\u00a0\u00a0\u00a0width<\/span>: 100<\/span>%;\n\n\u00a0\u00a0\u00a0\u00a0height: 100<\/span>%;\n\n\u00a0\u00a0\u00a0\u00a0background: url(https:\/\/res.cloudinary.com\/mayashavin\/image\/upload\/v1702370398\/Hippopy\/Arts\/ninja_assassin) center;<\/span>\n\n\u00a0\u00a0\u00a0\u00a0background-size: contain;\n\n}<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\nThe value contain<\/code> for background-size<\/code> 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.<\/p>\n\n\n\nWith this, we can ensure the background image will always be responsive and fit the screen size without stretching out of its original size.<\/p>\n\n\n\n
But is using the opacity property the ideal way to create transparent background images, or is there another way?<\/p>\n\n\n\n
The Drawbacks of Using the CSS opacity<\/code> Property<\/strong><\/h2>\n\n\n\nThe CSS opacity<\/code> 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.<\/p>\n\n\n\nIn our demo, we separated the background image div<\/code> and the main<\/code> 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<\/code>. If we wrap the `main` within div.background-image<\/code>, the entire main<\/code> content will inherit the opacity<\/code> property of .background-image<\/code>.<\/p>\n\n\n\nSince the background-opacity<\/code> 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.<\/p>\n\n\n\n