Visuals are a large part of the work and fun of using CSS. One of the more interesting visual options is to use the background opacity CSS effect. In this brief guide, you will learn how to manipulate the opacity of an image to achieve a transparent visual of your own.
The guide will provide code examples and output images for assistance. If you need any details on the basics of HTML or CSS, the posts HTML for Dummies and CSS Basics for Beginners are two quick reads to help you get started.
Why Use Background Opacity CSS Effects?
A transparent background can be a great choice of style for content design. Text and menu items can use a transparent background to help drive attention to the content in the foreground. . Instead of using just a normal colored background, you can work with a translucent image to add extra spice to your overall design.
How to Add Background Opacity CSS Effects
To explain the method for applying the opacity change, a sample set of HTML code will be used. In the example shown below, a single image tag was used in the body to house the target image.
Without adding styling to the page, we can render the following:
With the image now on the HTML page, the process of setting the opacity can be done within the CSS. The CSS Opacity property takes numerical values in the range of 0.0 to 1.0. These values represent the intensity of the opacity applied to the image. The lower the value the more transparent the element will become. A value of 1.0 will show no visible opacity change.
In the example below, the background opacity CSS value was set at 0.5. This middle-point value provides a noticeable change to the image.
Setting Up DIV Containers Over the Transparent Image
It is also possible to set the background as a transparent image as well. Although there is not a current direct CSS property to simply set the background opacity directly, you can still use CSS to make it possible.
In the HTML document example below, you can see that a few new elements have been added. An unordered list, another heading, and a separate image. These all need to be displayed in front of the background image.
Setting image opacity on a parent element passes it down to any child elements as well. This becomes an issue when you do not want the opacity to be inherited. Content can become hard to interact with if the issue is not addressed.
There are a few ways around this problem. In the following examples, you will see one of those methods. Inside the HTML code example, you might have noticed that there were three divs set up.
The first div with the id of “theContainer” is used to hold the background and the other content inside of it. Please note that this is an example and you could apply this same idea to the body, as well. The next div acts as a container for the background image that will be set. The last div is where the page content will be displayed.
With the HTML content set on the page, the CSS effects can be added to the stylesheet. Please take a look at the sample CSS code below.
The first div with the ID of “theContainer” has a relative position value. Next up is the second div with the class of “imageContainer.” This is where the background image is loaded. The background opacity CSS effect is also set in this section.
Lastly, the div noted with the class “textContainer” dictates the positioning of the text content that will sit in front of the image background. Note that another image is also to be loaded in the third div, as well.
CSS styling is then applied to the paragraph, list, and image elements within the HTML document, as well. You can see these changes in the example CSS code below.
Using the above CSS, the HTML document renders as shown below.
The background has the opacity effects from the CSS stylesheet. The content from the other div container is also visible on the page without inheriting the same opacity settings from the CSS.
A wonderful thing about web design is that it keeps growing and adapting. Opacity effects are simply one way to make it work for now. If you keep your eye on the subject of background opacity CSS, you might see that someone has developed a more efficient process for this issue. Even better, you might just fall into the rabbit hole of various other options you can add to your own CSS toolbox.
_________________________________________________________________________
Why stop at just CSS work? Add in advanced programming skills to design your own future. The creativity of programming is allowing people to do even more with their ideas.
If you want to advance your career, take the first steps by learning to code. Having these skills can help you open doors to those new professional possibilities. Enroll in Udacity’s Intro to Programming Nanodegree today to start the journey.
