Transparent Background CSS

CSS Background property to change the opacity

RGB color and alpha value

Do you have a nice background image that you don't want hidden by a solid color and your content? With some CSS3, a background color can be set with an opacity with the rgba value so that the content or image beneath will be visible through it no matter the background position or the background size.

Transparent background using rgba color values

CSS Semi transparent element

The best way to demonstrate this effect is with an example with pseudo element that uses the background image property. Below is a background image of a child elements that is partially transparent allowing us to see what is behind the background image opacity. The CSS opacity property can be used on child elements on background images using opacity in CSS.

Background image opacity property

CSS Background size transparent box

In the above example, the outer background image is solid black. The inner background image opacity is a very light grey; however, the background opacity is set to 40% causing the black to bleed through and make the grey much darker using rgba color values within the transparent box and text align. Whether you want the css element to be a linear gradient, completely transparent or fully opaque you can change the opacity with the color contrast ratio. To accomplish this in CSS pseudo elements with the opacity property of the background image, the following rgb color code can be used with the opacity property to control the image opacity with the pseudo element:

div.outer {
background-color: #000;
height: 400px;
width: 400px;
padding: 1em;
}
div.inner {
background-color: # 918f8f;
background-color: rgba(145, 143, 143, 0.4);
height: 300px;
width: 300px;
}

CSS opacity property with child elements

Completely transparent, fully opaque or linear gradient

The rgba color values function accepts four parameters, the red, green, blue, and alpha of the background image color. The alpha parameter is the level of opacity between 0 and 1; 1 being fully opaque and 0 being fully transparent within the background position. In the above example, 0.4 is used to set it to 40% of the background image with opacity in CSS to make it semi transparent. Once again CSS3 to the rescue for us again with no img src and the background property! No longer do we need to save background images as PNGs or GIFs with transparency opacity property, instead a background-color and rgba value can be used to achieve the same effect with the background repeat on the pseudo element background image with the correct background size and font size.

The background color property can be fully transparent or have a transparent hover effect on your div element using the css property and rgb color and alpha value for the right opacity of the entire element or parent element of the pseudo element with background repeat.

The transparent box of the background image can have a hover selector for when the user hovers that can no repeat the opacity to justify content of the div class. The position relative and z index can help justify content to align items and display text content in the HTML page.

Published on Jul 5, 2022

Tags: The Ultimate CSS Tutorial for Beginner Programmers