Solved

Transparent background <div> in i.e.

Posted on 2007-11-20
3
1,418 Views
Last Modified: 2013-11-19
Hi.
Anyone who can show me how to create a div with a transparent background, not transparant text, that works well with i.e?
I've tested with the following code. It gives me transparent background and transparent text in Firefox, but nothing in explorer.

Hope you can helpe me.
Best regards
Kristian
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Untitled Document</title>
 

<style type="text/css">

<!--

.forside_bilde {

	float: right;

	width: 450px;

	height: 338px;

	vertical-align: middle;

	background-image:url(Illustrasjoner/Tp_09.jpg)

}

#forside_bilde_tekst {

   background: green;

   filter:alpha(opacity=40);

   -moz-opacity:.40;

   opacity:.40;

}

#forside_bilde_tekst h1 {

	color: #0000FF;

	filter:alpha(opacity=100);

   -moz-opacity:.100;

   opacity:.100;

}

-->

</style>

</head>

<body>

<div class="forside_bilde">

        <div id="forside_bilde_tekst"><h1>testText</h1></div>

 </div>

</body>

</html>

Open in new window

0
Comment
Question by:kristian_gr
  • 2
3 Comments
 
LVL 21

Expert Comment

by:jvuz
Comment Utility
Which version of IE are we talking about?
0
 
LVL 21

Expert Comment

by:jvuz
Comment Utility
0
 
LVL 12

Accepted Solution

by:
oceanbeach earned 500 total points
Comment Utility
Hello kristian_gr,

Try the following page...

I hope this helps!

oceanbeach
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>html</title>

<style type="text/css">

.box {

position: relative;

width: 450px;

height: 338px;

vertical-align: middle;

}

.transparent {

background: green;

position: absolute;

width: 450px;

height: 338px;

filter:alpha(opacity=40);

filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40);

-moz-opacity:0.40;

opacity:0.40;

}

h1 { color: #0000FF; }

</style>

</head>

<body>

<div class="box">

  <div class="transparent"></div>

  <h1>testText</h1>

</div>

</body>

</html>

Open in new window

0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Suggested Solutions

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
This video teaches users how to migrate an existing Wordpress website to a new domain.

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now