CSS - Setting Background Opacity

I am trying to learn CSS and am currently trying to mirror a website to practice. I would post the website I am mirroring but due to the forum rules, I cannot.

I am trying to replicate the black background with opacity for the a:link and the white background with opacity for the a: hover. My browser is IE and I have tried the filter:alpha(opacity=1-100) but to no avail.

Here is the HTML I am using for this particular container:

<div id="fivels">

<div id="classone">
<a class="home" href="#">Home</a>
<a class="gallery" href="#">Gallery</a>
<a class="about" href="#">About</a>
<a class="help" href="#">Help</a>
<a class="partner" href="#">Partner</a>

</div>

</div>

And here is my CSS:

#fivels {
margin-left: auto;
margin-right: auto;
height: 150px;
width: 800px;
background-image: /* the forum will not let me post URLs, gut a jpg of grass goes here */
}



#classone {
margin-left: auto;
margin-right: auto;
width: 800px;
text-align: center;
}

#classone a:link {
color: white;
text-decoration: none;
background-color: black;
filter: alpha(opacity=20);
}

#classone a:visited {
color: white;
text-decoration: none;
background color: black;
filter: alpha(opacity=20);
}

#classone a:hover {
color: white;
text-decoration: none;
background-color: white;
filter: alpha(opacity=20);
}

.home {
padding: 3.2em;
}
.gallery {
padding: 3.2em;
}
.about {
padding: 3.2em;
}
.help {
padding: 3.2em;
}
.partner {
padding: 3.2em;
}

Also, on a side note, is using the padding attribute the most efficient way of seperating the links?

I am using <input type=image> in my code and setting a background image for this element using css.
I am not defining"src" so I get blank image symbol.
How do I remove that?

Hello Friends,

I want to place an image bellow my (h1 heading). The image is a 50px-800px box with curved edges both the side. Basically we

place an image bellow any text with "background: url('image-location') repeat-x;" css code. But as i told the image have curved

edges at both sides. Hence, I have cut the image in 3 pieces namely h1.gif, h2.gif & h3.gif respectively. Now i am confused

how can i place it. Please help me!



This is the tag i am using

<div id="title">
<h1>This is the title</h1>
</div>

And This is the CSS code bellow,

#title {

height: 50px;
background: url('../img/h1.jpg') no-repeat;
background-attachment: fixed;
}

How can I set a background image as a wrapping element?

Here is what I do have:

graphics/navigation.gif
left top
no repeat

Note that links will be set over the image.

hello. i'm building a javascript application which will allow the user to select a file from his/her hard drive (using <input type='file' />) and display the image in the background. when the user hits submit, the image will be uploaded and in the future, the user will have the image hosted from the server.

the reason i post this in the CSS forum is because the error is coming from CSS, not javascript. i need to know how to point the css to an image on the user's local machine.

I am trying to set background of my divs with:
background:#FFFFFF url(images/nheadlines_bg.gif) top no-repeat;

It works fine with IE but at Firefox there is only a white background. You can check this out at: http://www.pearl.ru/isdunyasi

Don't know if I got the language right on the headline? I've got the following css for my forms:
.form table {
border-collapse: collapse;
color: black;
border: 1px solid black;}

and the markup looks like this

<table class="form" width="100%" cellspacing="0">

however when I link a different page to the same sheet I'm getting a table that has been styled with the above scc even though i haven't marked up the class...

any ideas...

good
http://www.rickweston.com/my_ucwdc/membership/register.php

bad
http://www.rickweston.com/judge/about_judge/index.php

thnks for any help

Usually I find anything I need to know if I have the source code of a web site but this time I've lost. Some web sites changes the background color of the browsers address (URL) input field (works only with Gecko type browers I think).

Just one example: https://www.gmx.net (a commercial email service provider in Germany).

How can this be done?

Ciao, Meph

Hi, I have a div which is somewhat transparent. There is no problem there. Then I have textin this div, which is also showing up with transparency, and this is the problem. I need the text to be 100% opaque.

Here's the div css: Code:

.rounded_STYLE
{
	filter:alpha(opacity=60);
	-moz-opacity:.60;
	opacity:.60;
	width: 224px;
    background-color: #616161;          /* if needed */
    /* border: 1px solid BORDER_COLOR; */  /* if needed */
    -webkit-border-radius: 4px;    /* for Safari */
    -moz-border-radius: 4px;       /* for Firefox */
}

Here's the text css: Code:

.bodywhite{
margin:0px, 4px, 4px, 4px;
opacity:1;
font-size:10px;
color:#FFFFFF;
font-weight:normal;
}

I've tried different numbers in the opacity value, but to no avail.
Here's the site:site

any ideas?

thanks

Ok, I am creating an image gallery that is composed of a square layer that has opacity of 50. I have created 9 other div layers within that layer to hold thumbnails. When I put images in those thumbnail divs, the image shows up as semi-transparent. I do not want this. Here is my code, how can I turn off opacity just in those div thumbnail squares?


CSS
Code:

    
    DIV.outer
      {
      position:absolute;
      left: 50%;
      top: 50%;
      width: 500px;
      height: 488px;
	  border:2px solid white;
      margin-left: -250px; /* half of width */
      margin-top: -244px;  /* half of height */
      }
    DIV.inner
      {
      position:absolute;
      left: 50%;
      top :50%;
   	  width: 500px;
      height: 488px;
      margin-left: -250px; /* half of width */
      margin-top: -244px;  /* half of height */
      background-color:#CC6666;
	  filter:alpha(opacity=50);
	  -moz-opacity:.50;
	  opacity:.50;		
      }

	div.tn
	{
	position:absolute;
	width:115px; 
	height:115px;
	background-color: #660000; 
	layer-background-color: #660000; 
	border: 1px none #000000;

	}

HTML
Code:

<div class="outer">        
     <p>&nbsp;</p>
   <div class="inner">  
 <!--row 1!-->
     <div class="tn" style="z-index:2; left: 50px; top: 17px;"><img src="tn/tn_fountain.gif"></div>
     <div class="tn" style="z-index:2; left: 192.5px; top: 17px;"><img src="tn/tn_fountain.gif"></div>
     <div class="tn" style="z-index:3; left: 335px; top: 17px;"><img src="tn/tn_fountain.gif"></div>
 <!--row 2!-->	 
	 <div class="tn" style="z-index:2; left: 50px; top: 185px;"><img src="tn/tn_fountain.gif"></div>
     <div class="tn" style="z-index:2; left: 192.5px; top: 185px;"><img src="tn/tn_fountain.gif"></div>
     <div class="tn" style="z-index:3; left: 335px; top: 185px;"><img src="tn/tn_fountain.gif"></div>
 <!--row 3!-->
	 <div class="tn" style="z-index:2; left: 50px; top: 352px;"><img src="tn/tn_jackpot.gif"></div>
     <div class="tn" style="z-index:2; left: 192.5px; top: 352px;"><img src="tn/tn_jackpot.gif"></div>
     <div class="tn" style="z-index:3; left: 335px; top: 352px;"><img src="tn/tn_jackpot.gif"></div>
  </div>  
</div>

What i'm trying to get at here is how do I get non transparent items in a transparent div box?

I have a weird problem. I've applied opacity in my stylesheet for a few elements. My opacity is working fine in FF, but not in IE.

Here's the code I have:
filter: alpha(opacity=75); -moz-opacity:0.75; opacity:.75;

I've also applied it inline as well as in the stylesheet.

Page is located at:
ebonyevans.coastaldistribution.com/index.php

The top center and top left music player should be opaque.

Anyoen see what I'm doing wrong?

hi, ive been messing with opacity and want to know if i can achieve this.

I would like to have a background image on my page, then lay some divs over it. I want the image to be full opacity around the divs and be faded in the divs.

so i thought i'd add a class to the divs:
.opaq {
filter: alpha(opacity=50);
opacity: 50%;
-moz-opacity:0.5;
}

but the div inside with my content inherits the opacity and therefore is faded too

is there a way of having the opacity on the background of the div yet have the content 'full'

wat about z-index? to bring the content to the front

heres a pic:

I've set the main div content for opacity like this

#content-main {
margin-right:1%;
margin-top:0;
margin-bottom:2%;
width:58%;
background-color:#ffffff;
filter:alpha(opacity=70);
opacity:0.7;
}

but when I put an image in the div it acquires the opacity, and I want it to have none. I've tried to give it a style of opacity:1 and it didn't help. I tried alterting the image z-index to greater than 1 and it didn't help. How do I get the image not to acquire the opacity of the div?

Thanks

I was wondering if anyone knows a way to have use Opacity witin a div tab but then have another div tag in side of it not affected by Opactiy.

Here is the code i have I want background to be transparent but not transbox. But setting the opacity to 100 in transbox wont over ride background.:

Code:

<html>
<head>
<style type="text/css">
div.background
  {
  width: 500px;
  height: 250px;
  background-color: 000000;
  border: 2px solid black;
  opacity:0.6;
  }
div.transbox
  {
  width: 400px;
  height: 180px;
  margin: 30px 50px;
  background-color: #ffffff;
  border: 1px solid black;
  opacity:0.100;
  }
div.transbox p
  {
  margin: 30px 40px;
  font-weight: bold;
  color: #000000;
  }
</style>
</head>

<body>

<div class="background">
<div class="transbox">
<p>This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
</p>
</div>
</div>

</body>
</html>

Can someone explain me how to set on a photo-background ( opacity 100% 640x480 ) a square of 320x320 as size and opacity @ 25% and on that square i have to put some text that is at 100% opacity.


The problem is that when i set 100% opacity for the text... it gives me 100% of the 20% opacity... i need to get the full 100% of 100% opacity... can someone explain me ?

And another question... how can i set an opacity for Opera Browsers ?