How do i make my background image transparent in CSS if I have the following code?

Question

I am trying to make my background image slightly transparent. I read another article here on this topic but it did not work when I tried it. I hope I didn't give too little or too much info. Here is my HTML code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>My Title</title>
<link type="text/css" rel="stylesheet" href="../Stylesheets/stylesheet1.css">
<link type="text/css" rel="stylesheet" href="../Stylesheets/stylesheet2.css">
<link type="text/css" rel="stylesheet" href="../Stylesheets/stylesheet3.css">
</head>

<body>
<div id="container">
    <div id="background" class="translucent"></div>
<div id="content">
    <div id="backgroundIMG">
</div>
</div>

<H1><div align="center">A heading</div></H1>
<p>
<div style="width:890px;height:40px;border:5px dotted Coral;">
CONTENT
</div>

<p>
CONTENT

<div class="index">
<H2>Index</H2>
Home (on now)
<br>
<a href="page2.html">Bored Main Page</a>
<br>
<a href="page3.html">Tables are here!</a>
</div>
</div>

</body>

Here are my stylesheets:

stylesheet1:

html
{
    font-weight: bold;
}

body
{
margin-left:30px;
margin-right: 30px;
background-repeat: no-repeat;
width: 100%;
height: 100%;
}

stylesheet2:

.index
{
line-height: 1.5em;
padding: 1em;
border: DarkGreen solid 5px;
text-align: left;
width: 890px;
}

.bgCyan
{
background-color: cyan;
color: #525252;
}

.bgGreen
{
background-color: LightGreen;
color: DarkBlue;
}

.bgBoredText
{
background: url(../Images/my_image.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

.translucent
{
opacity: 0.4;
filter: alpha(opacity = 40); /* For IE */
}

stylesheet3:

#container
{
position: relative;
width: 200px;
height: 200px;
}

#background, #content
{
position: absolute;
top: 0;
left: 0;
}

#backgroundIMG
{
background-image: url(../Images/my_image.jpg);
}

Thank you in advance

We can't really see your problem, because we can't see your image. — KatieK, Jan 22 '13 at 19:18

score 2 · Answer 1 · answered Jan 22 '13 at 19:11

2

As far as I know, CSS can't alter the opacity of a background image. You will have to alter the image in an image editing program to reduce it's opacity.

answered Jan 22 '13 at 19:11

chipcullen

6,840
1
21
17

The `opacity` property alters the opacity of an entire element, including its background image. You're quite right that CSS can't affect the opacity of *just* a background image though. – Paul D. Waite Jan 22 '13 at 19:16
Correct - maybe my use of the word "opacity" was a poor one, because I didn't mean the opacity property. Just the opacity of the image itself, which is what it sounds like the OP was after. – chipcullen Jan 22 '13 at 19:19
1

@chipcullen: oh no, not a poor choice - I knew what you meant. I just meant that CSS *can* alter the opacity of a background image (by altering the opacity of the entire element, including the background image), but it can't alter the opacity of a background image without affecting the rest of the element. – Paul D. Waite Jan 22 '13 at 19:32

score 1 · Answer 2 · edited May 23 '17 at 12:23

I had the same question, and found the answer from a response to another StackOverflow question. The trick is to use the :after property of the body element. link

    body:after {
        content: "";
        background-image:url('http://www.w3schools.com/css/klematis.jpg');
        background-repeat:repeat;
        background-position:center;
        background-attachment:fixed;
        background-size:cover;
        opacity: 0.5;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        position: absolute;
        z-index: -1;
    }

Hans Vn · Answer 3 · 2013-01-22T19:20:34.217

0

Add this css to your #backgroundIMG

 -khtml-opacity: 0.5; 
 -moz-opacity: 0.5; 
 -ms-filter:"alpha(opacity=50)";
  filter:alpha(opacity=50);
  opacity: 0.5;

note that there are some difficulties when your page is viewed with different browsers. For example: IE8 (and earlier) doesn't work with the opacity parameter.

edited Jan 22 '13 at 19:20

answered Jan 22 '13 at 19:13

Hans Vn

787
1
16
32

i tried adding that code to my #backgroundIMG but all it did was remove my image all together. should i just edit the opacity in photoshop or gimp? – code--shitter Jan 22 '13 at 19:36
you don't need to photoshop it... the browser should be able to render it perfectly (and you aren't stuck to the .png format). Try adding it step by step: first start with the background image, if that works add another line: opacity, if that doesn't change anything, add another line (like filter:alpha) and so on. see if your image disappears again and where it disappears. (maybe the opacity was set too high?) – Hans Vn Jan 23 '13 at 19:54

How do i make my background image transparent in CSS if I have the following code?

3 Answers3

Linked