Home/ Questions/Q 7543433
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-30T08:25:38+00:00

I have an HTML page with a pink background image. I want to define

  • 0

I have an HTML page with a pink background image. I want to define a DIV on the page for text, but I want the background to show in the DIV much paler, almost white. I tried this, but it doesn’t seem to work on IE8.

My HTML…

<html>
  <head>
    <link href="styles.css" rel="stylesheet" type="text/css">
  </head>
<body>

<div class="div1">
testing
</div>

</body>
</html>

and here’s my CSS file …

body
{
background-image:url('back.jpg');
background-repeat:repeat;
} 

.div1
{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
background: #ffffff;
}

Any ideas?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The thing you have to keep in mind is that the opacity property will affect the opacity of the entire element, including its text/children. If you want to affect JUST the background, you will need to approach it in a different way.

    You could use RGBA for modern browsers:

    .div1 {
  background-color: rgba(255,255,255, .4);
}

    Then, in a separate IE stylesheet (using conditional comments or similar method):

    .div1 {
  background: transparent url(white_trans.png);
 }

    You would need to make a PNG-24 image, 1px x 1px, that was just simply white reduced to 40% opacity. That will work in IE7 & 8.

    • 0