Making a background image opaque

HTML & CSS
1

Hi,

Is it possible to add opacity to a background image?

I have the following:

.main-banner{
	background: url("assets/img/main-banner.jpg") no-repeat;
	background-position: top right;
	background-size: cover;
    opacity: 0.5
}

But this is adding the transparency to the whole div.

I’ve also tried:

.main-banner:after{
	background: url("assets/img/main-banner.jpg") no-repeat;
	opacity: 0.5
		}

but this doesn’t work.

Is there a way to make just the background of a div opaque?

2

A pseudo element needs content to display, even if it’s just an empty string. And without any “real” content it will need volume. To get volume (fill the container) use absolute positioning with 0 on all sides.

2 Likes
3

Thanks Sam :slight_smile:

And thanks for moving the post Technobear - I posted in the wrong category!

1 Like
4

Yes, you can do it with a linear-gradient while using multiple background images.
A linear-gradient is considered an image so it can be used with either the background-image property or the shorthand background property.

You don’t need a pseudo element to hook the opacity to. When using a rgba color on your gradient the alpha parameter defines the opacity.

opaque-bg

<!DOCTYPE HTML>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Opaque Background Image</title>
<style>
.opaque-bg-img {
  font-size: 2em;
  width: 600px;
  min-height: 400px;
  border: 1px solid;
  margin: 1em;
  background:
  linear-gradient(
    rgba(255, 255, 255, 0.5),
    rgba(255, 255, 255, 0.5)
    ),
  url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/owl1.jpg) repeat-x;
}

</style>

</head>
<body>

<div class="opaque-bg-img">
  <p>Sample Text</p>
  <p>Sample Text</p>
  <p>Sample Text</p>
  <p>Sample Text</p>
  <p>Sample Text</p>
  <p>Sample Text</p>
</div>

</body>
</html>
3 Likes
5

Thank you :slight_smile:

6

This can work, but strictly it’s not a semi-opaque background, but the illusion of one. If the underlying container has the same solid background colour as the gradient it works fine.
But if the underlying container has its own background image or pattern the illusion may fail, unless you can exactly match that background size and position in the div background.

For example, here the white gradient gived the image a tint, but there is no sign of the black/blue gradient underneath.

With the pseudo element you have true transparency with the underlying background showing through the div background.

So you can get away with the gradient method in some cases, but not all.

3 Likes
7

Also, just as a minor note: Generally speaking you’re not ‘adding’ opacity to an element - elements by default are fully opaque. What you’re actually doing is reducing opacity to increase its transparency.

2 Likes
8

Yes, I see what your saying. More than one BG image can cause ill effects.

It’s the same old problem from years ago. There are countless threads here at SP about “Setting Opacity without effecting child elements”. It’s always going to require an extra element for true transparency.

When using an rgba or hsla there is no color code for transparent. With rgba it must be a value between 0-255 which will always leave a hint of color when the opacity is set.

It seems to me that this could be easily resolved by the CSS guys writing the specs and the browser vendors. It may not be as easy to fix as it sounds though, it may have something to do with the “Z” layer in one way or another. The root of the problem is that opacity inherits to child elements but nobody wants it to inherit, and rightly so. Opaque text is unreadable.

It should be up to us to reset the child elements to inherit if we want them too. As it is with box-sizing.

1 Like
9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.