How to create a fixed background image tthat is transparent

HTML-CSS
1

Im playing around with css and Im not able to figure out a way to get a background image that I ca make transparent while leaving the overlying text at regular opacity. Can someone help me understand what to do? Ive tried using rgba in conjunction with an image, ive tried using opacity, and Im at a loss cause none of this works

User Agent is: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.131 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/responsive-web-design-projects/build-a-technical-documentation-page/

2

Hello, try this in your css

.background-div {
    background-color: YOUR_COLOR !important;
    background-image: url("YOUR_URL");
    background-blend-mode: multiply;
    background-size: cover;
}

you can play with background-blend-mode and its differents options, it defines the way your color and your image will blend. Hope this helps you

3

The solution i generally use is blurring the image with css filter property in the before pseudo class
so assuming you have a class with a cover image

.cover {
  background-image: url('some source of your image');
}

.cover:before {
    content: "";
    position: absolute;
    width : 100%;
    height: 100%;
    background: inherit;
    z-index: -1;

    filter: blur(10px);
}

Hope this helps :+1:

4

Hello,
Thanks for your replies. What I want to do is to actually have like a faded background with a low opacity, and then I want text and other stuff to render on top with regular opacity. I looked at the use of opacity, and it says that the opacity affects all the child elements as well. But I dont understand this, cause if in one div I specify through css that I want an image to be rendered with a certain opacity, why does that opacity value affect the rendering of elements that are in other divs that are not enclosed in this div where I have specified the image? To be children, the child element has to be enclosed withing the parent element scope correct?
So

<div id="a">
  <div id="b">Here b is completely enclosed in a and should be a child of a</div>
</div>
<div id="a"></div>
<div id=b">Here b is not enclosed in a, so b is not a child of a</div>

Is my understanding corrrect? If so, why would the opacity of a (in the second example) affect the opacity of b?

5

It’s impossible to tell without seeing an example of your code,
but there must be some other property / code that interfere somewhere.

In a simple case like the following:

<div style="opacity: 0.5;">
      <div>Inside</div>
</div>
<div>Outside</div>

You will see inside blurred, while outside being unaffected :wink:

6 
    <div id="backgnd"></div>
This is some text that should not be affected by whatever happens inside the above div


and the css is:

#backgnd{
    background-image: url('images/purpleSea.jpg');
    opacity: 0.3;
    background-blend-mode: overlay;
    background-size: cover;
    background-attachment: fixed;
    z-index: -1;
}

What Im trying to do is to get a background on the page which can be made transparent or faded, so that the text that is written over it will be clearly visible.
But somehow the opacity affects the text that is outside the div? How can I get what I want?

8

Most probably is the size of the image interfering with the position of other elements.

Anyway, since you are using background images, have you checked my previous comment about using :before to blur the background?