transparent background image

Question

I have the following css.

   #mypass{
                background-image: url(\"Images/logo.png\");
                background-attachment: fixed;
                      


        

Answer 1

The element that needs to have semi-transparent background:

#myPass

This is how without touching the HTML, we add controllable transparency background to the element:

#myPass::before {
    content: "";
    position: absolute;
    top: 0; right: 0;
    bottom: 0: left: 0;
    background: url(image.jpg) no-repeat top center;
    opacity: 0.5;
}

The only thing to note is that the #myPass element, must be positioned:

#myPass {
    position: relative; /* absolute is good too */
}

Answer 2

Just ran into this issue myself. If you combine linear-gradient with the background image url, you can control image opacity. By keeping the two "gradients" the same, you can get a filter/opacity effect without using opacity proper.

i.e.

 .bg-image {
        background: linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.5)), url(path-to-image.jpg) center no-repeat;
        background-size: cover;
      }

Answer 3

Why don't you create another div and use it as a pseudo-background or something?

Answer 4

This is the way to do it:

div {
  width: 200px;
  height: 200px;
  display: block;
  position: relative;
}

div::after {
  content: "";
  background: url(image.jpg);
  opacity: 0.5;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;   
}

Answer 5

You can't adjust the translucency of a background image with CSS.

You can adjust the translucency of an entire element (opacity) or of a plain background rgba(), but not a background image.

Use an image format that supports translucency natively (such as PNG) and embed the translucency you want in the image itself.