Content of the material
How do we help you with your tasks?
- Transparent background maker is absolutely free. You don't need to sign up or provide your personal data to make image transparent.
- User-friendly: the tool is easy to use and doesn't require special tech skills. You don't have to use a lasso tool or magic wand like in Adobe Photoshop.
- It will take just a couple of seconds: upload an image from your computer, Mac, smartphone, or tablet. The background will be automatically changed to a transparent one. Click download to save the new image as a png file.
Video
Transparent Box
When using the opacity property to add transparency to the background of an element, all of its child elements inherit the same transparency. This can make the text inside a fully transparent element hard to read:
opacity 1
opacity 0.6
opacity 0.3
opacity 0.1
Easy to Use
Select an image and choose a color to make transparent. It’s as easy as that.Great for removing background in portrait or product photos.
Background Image Transparency in HTML and CSS
CSS offers a way to set the background image for a container element with the background-image property, so you don’t necessarily have to do it with the CSS. This means you can also place text in the container as well.
The downside of this approach is that the opacity is set for the container where the image and text are. So, the opacity affects the text as well, not only the image. This is probably not what you want!
The solution
By default, when you apply an opacity to a container, the descendants inherit it as well.
A workaround in this situation is to set the background image in the HTML. This makes it easy to apply the opacity to the image only, instead of setting the background image for the container in the CSS.
This time around, the image and the text will be separated, so the text will not inherit the value set for the opacity.
This means you also have to use CSS positioning to align the text within the image.
In the CSS code snippet above, I use flexbox to center everything on the page.
The container div element with the class of showcase is positioned relative, so you can position the h1 text absolute within it. This will push the h1 text to the top-left corner of the image. The top and left properties are then used to push the text to the bottom-left corner of the image.
If you are wondering what the top and left properties are, they are the properties you get access to when you use the display property.
In addition to these two, you also get access to the right and bottom properties. They let you position an element anywhere.
In the end, the image is opaque and the text is not affected:
Solution: Put the background image into a pseudo-element of the parent
To fix this issue, we need to put the background image into a child element of the parent. This will ensure that the background image and the text content will be on their own “layer” in the parent. You can then control each layer’s opacity without affecting each other!
One approach you can use is to put the background-image styles in a pseudo-element of the parent element.
Since the pseudo-element is a sort of child of the parent, you can change the opacity of it without affecting the text content.
To make that pseudo-element the same size as the parent, you’ll have to absolutely position it and set its top, right, bottom, and left values to zero so it doesn’t collapse. Also, as a pseudo-element, it needs to have the content property set, otherwise it won’t show up on the page.
(You can also put the background image into its own child element, but using a pseudo-element helps keep the HTML simplified.)
Then for the text, which we have in the <h1> tag, you will need to set it to position: relative so that it will be on top of the pseudo-element and background image. If you don’t explicitly set the position property, it will be hidden underneath the absolutely positioned pseudo-element in the z-index layer stack.
Lastly, don’t forget to set the parent to position: relative to keep the child within bounds!
Now, the text will still be at a default opacity of 1, and the reduced opacity setting will be limited to the background image in the pseudo-element.
I have the code for the above example in a Codepen— feel free to play around with it!
Report Error
If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:
help@w3schools.com
