transparent background image

Question

I have the following css.

   #mypass{
                background-image: url("Images/logo.png");
                background-attachment: fixed;
                background-position:140px 100px ;
                background-size: 100px;
                background-repeat: no-repeat;
                opacity:0.5;
                fileter:alpha(opacity=40);
                color: blue;
        }

and iam using this as

<div id="mypass">
      <center><h2>PRAGATI ENGINEERING COLLEGE</h2>
    <h5>1-378,ADB Road,Surampalem-533437,E.G.Dist.,ph:08852-252233</h5></center>

      <%    out.println("________________________________________________________");
        String photo="Image/"+id+".jpeg";
       System.out.println(photo);

       String yy="";
       int y=((1900+d.getYear())-(Integer.parseInt(id.substring(0, 2))+2000))+1 ;
       switch(y){
          case 1:   yy=y+" st";break;
          case 2:   yy=y+" rd";break;
          case 3:   yy=y+" rd";break;
          case 4:   yy=y+" th";break;
          default: yy=y+" th";
       }

       int branch=Integer.parseInt(id.substring(6,8));
       System.out.println(branch);
       switch(branch){
         case 12:yy+=" IT";break;
         case 05:yy+=" CSE";break;
         case 03:yy+=" MECH";break;
         case 02:yy+=" EEE";break;
         case 04:yy+=" ECE";break;
         default:yy+="PEC";
       }
    %>
      <h2 class="buspass" style="color:#FF33CC"><a class=title onclick="javascipt:window.print(), width=400, height=400" onmouseover="this.style.cursor='hand'">BusPass</a></h2>
      <img class="printright" src="<%=photo%>" width="90" height="90" />
      <table>
         <!-- <tr><td>RollNumber</td><td>: <%=id%></td></tr> -->
          <tr ><td>Name</td><td style="color:black">: <%=name%></td></tr>
          <tr><td>Class</td><td style="color:black">: <%=yy%></td></tr>
          <tr><td>AcadamicYear</td><td style="color:black">: <%=s%></td></tr>
          <tr><td>Stage</td><td style="color:black">: <%=pickuppoint%></td></tr>
          <tr><td>BusRoute</td><td style="color:black">: <%=routecode%></td></tr>
        <!--  <tr><td>SeatNo</td><td>: <%=seatno%></td></tr>-->
        <!--  <tr><td>IssueDate</td><td>: <%=ddd%></td></tr> -->
      <!--    <tr><td>ValidTill</td><td>: <%=valid%></td></tr> -->
      </table>
      <h3 class="printrightdown">INCHARGE</h3>
    </div>

that is applied to all the elements that uses the class.Instead i want to use opacity and filters only to background image..How can i do it ??

woah! hang on there! your CSS is invalid. you're confusing `class` with `id`. there's no opacity or filter in your code. — SpliFF, Jun 28 '11 at 05:55
First of all, #mypass in an identifier meant for only a single element. If you want multiple elements to use the css use a class like ".mypass" — dtech, Jun 28 '11 at 05:55
save the transparency to the image. (alpha channel in the PNG) — Eric Fortis, Jun 28 '11 at 05:57
@SpliFF - where else do you think people are supposed to go when they're trying to get on their feet with this stuff? It's infinitely more helpful for you to calmly explain whatever the OP may be confused about rather than attacking the OP for the very reason they're using this site. — sscirrus, Jun 28 '11 at 05:59
@sscirrus: SO is not a tutorial site - it's a QA site. You don't get the A without a coherent Q. Simple as that. — SpliFF, Jun 28 '11 at 06:05
I would just like to point out that the css `filter` property is misspelled... — , Jun 28 '11 at 06:08
@SpliFF - OP is not asking for a tutorial. S/he may have asked an imperfect question but it is 1) specific and 2) clear enough to be understood by you and every other reader. — sscirrus, Jun 28 '11 at 06:08
You're making two different points. @SpliFF is asking for coherency (fair enough, this question does need it). @sscirrus is asking for civility (fair enough, that first comment could use it). — Ben, Jun 28 '11 at 06:11
possible duplicate of [CSS background-image-opacity?](http://stackoverflow.com/questions/6890218/css-background-image-opacity) — user, Feb 02 '14 at 23:16
possible duplicate of [Set opacity of background image without affecting child elements](http://stackoverflow.com/questions/4997493/set-opacity-of-background-image-without-affecting-child-elements) — user7610, Aug 31 '15 at 15:40

Quentin · Accepted Answer · 2012-08-06T05:57:45.163

38

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.

edited Aug 06 '12 at 05:57

answered Jun 28 '11 at 06:10

Quentin

914,110
126
1,211
1,335

score 8 · Answer 2 · answered May 20 '13 at 21:10

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 */
}

score 5 · Answer 3 · answered Oct 13 '17 at 18:18

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;
      }

score 4 · Answer 4 · answered Aug 24 '14 at 20:42

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;   
}

score 3 · Answer 5 · answered Jun 28 '11 at 07:57

3

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

answered Jun 28 '11 at 07:57

Erric

750
9
29

transparent background image

5 Answers5

Linked