View Full Version : layer transparency

10-15-2006, 02:21 PM
This should be simple but my brain is not working properly.

I have an image as a background and have placed a layer over, which is a set colour.

What I am trying to do is make the colouered layer 50% transparent.

Any ideas greatly appriciated.

Thanks in advance.

10-16-2006, 01:32 AM
You can look at this, altough there's issues with the content of the layer also getting transparency.

10-16-2006, 01:45 AM
if your using css it makes it pretty easy after u get ur head around the limits of opacity.
heres some code u can try out for size:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<style type="text/css">
body {
background: url(http://www.freedesktopwallpapers.net/beach/1beach2b.jpg) repeat;
#wrap {
background: #fff;
filter: alpha(opacity=60);
-moz-opacity: .60;
opacity: .60;
border: 1px solid #666;
width: 800px;
height: 300px;
margin: 0 auto;
text-align: center;

<div id="wrap">

The only problem is that the text inside inherits the opacity. You need to set the wrapper div to relative to get around this.</P>

10-16-2006, 11:32 AM
Thanks for the help.

Just one thing on the code attached in the last reply, can you just tell me what this part is all about.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

Thanks again.

10-16-2006, 12:05 PM
that is the doc type which is used to validate the page by the browser. I code in xhtml strict 1.0 (this is hte common professional one to use.... the other is transitional 1.0 too)

w3 are the people who give the web standards... check out all the doc types here

10-16-2006, 01:30 PM
And it's required to set the doctype.
It declares to which protocol your page is written and should be read, and if you use a validation service, it will check your code against the protocol.

10-17-2006, 09:50 PM
Thanks for your help on this.

I have been trying to write the secton as I need it.

The basic site is created with a table with split cells, one cell has an image as the background and this cell is the area I want to place a layer over the top with a semi-transparent background.

#main_box_layer {
filter: alpha(opacity=60);
-moz-opacity: .60;
opacity: .60;
margin: 0 auto;
top: 120;
background-color: #660000;
overflow: auto;

Now the layer works and is transparent but it has brought to light two other issues.

1. the auto scroll bars are not working and it just increases the size of the layer.
2. if I preview in IE the layer is positioned correctly 120px down from top, but in FF the layer appears 120px below top of cell.

Any ideas?

10-18-2006, 01:04 AM
Validate your CSS :-)

Width and height needs 'px'
as in width: 450px;

10-18-2006, 07:30 AM
Thanks you.

03-26-2008, 01:23 PM
thanks soooooooooo much for this post! great help and works perfectly!!