Solved

Opacity or see through?

Posted on 2011-03-20
10
224 Views
Last Modified: 2012-05-11
I have a blog site where the text (gadget text) has a black background.  I would like to set it with some level of transparency, because I was to be able to see more of the background picture.  What CSS change do I have to do?

http://hacienda--guameru.blogspot.com/ 

Thanks,
JP
0
Comment
Question by:easycapital
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 2
  • 2
  • +1
10 Comments
 
LVL 23

Expert Comment

by:jeremyjared74
ID: 35176339
You need to add this to one of your CSS files. It has max setting for different browsers. Just change the 70 tow whatever you want (just make sure to change all 3):
aside {
-moz-opacity:.70; 
filter:alpha(opacity=70); 
opacity:.70;
}

Open in new window

0
 

Author Comment

by:easycapital
ID: 35176349
Exactly what I wanted.  How can I do it, so that text remains at 100% white.

Thanks,
JP
0
 

Author Comment

by:easycapital
ID: 35176356
Also, the video has a different section name?  It remained unchanged.
JP
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:easycapital
ID: 35176364
Not only the text, but everything inside the boxes, should remain 100 opacity, just the background of the boxes, should become lighter.

The video and the footer seem to have another name.

Thanks,
Juan
0
 
LVL 10

Expert Comment

by:khan_webguru
ID: 35176419
Hello JP,

I also faced this kind of problem and solved it myself with the help of CSS.

body
{
    background: #000 url(../images/bg3.png) no-repeat center top;              
}
.header
{
      height:47px;
      position:relative;      
      float:left;
      background-image: url(../images/header_transition.gif);
      background-repeat: repeat-x;
      margin: 10px 0 0 0;
      top: 0px;      
      width: 100%;      
      filter: alpha(opacity=85);             
}

In my case I applied an background image "BODY" and then top of the page I have very small bar that have all the link and this "DIV" as mentioned above have its own color and background image so I just set one tag that was "filter: alpha(opacity=85); " And got my desired results.

What it does this tag will make transparent the above header "div" according to your opacity value. In my case I tried to show slightly DIM bar so that header will show its own background as well "BODY" background color should also display through. Hope this will solve your problem.

But one thing if you have scenario like this:

<div>
 <div>
    <div>
    </div>
 </div>
</div>

So you have to set opacity for all child so that you can view parent background by making them transparent.

CHEERS!

ASIF KHAN

0
 
LVL 10

Expert Comment

by:khan_webguru
ID: 35176445
One more thing as you are displaying "VIDEO" so I am supposing you have set your background on body and inside that you have some div then video tag like this

<body>
 <div>/////Just set opacity for this div
  <div>/////If you will set opacity for this div then it will make transparent your video too.
   <object></object
  </div>
 </div>
</body>

CHEERS!

ASIF KHAN
0
 
LVL 3

Expert Comment

by:brdavs
ID: 35176457
There are 2 ways of achieving that. One, rather simple is to create a 1px PNG image with the desired transparency and set that as the background.
.widget { background: url(transparent.png);}

Open in new window


But there is a fancier way (css3) for 50% transparency:
.widget { background: rgba(0, 0, 0, 0.5); }

Open in new window


Needless to say, IE completely ignores CSS3, so, the first solution is the only way apart from using filters in your CSS...

Best regards!
0
 

Author Comment

by:easycapital
ID: 35176544
Can I add a png file in Blogger?
Thanks,
JP
0
 
LVL 3

Accepted Solution

by:
brdavs earned 500 total points
ID: 35176656
I do not know blogger per se, but if you can upload an image that image will have an url and you just exchange that URL for transparent.png.

By the way. Your CSS should be separate from HTML. Look at your theme and either ad this line to your theme or create a new CSS and add that to your main HTML layout.

I do not know blogger and it's capabilities, but I found a nice article here:
http://labnol.blogspot.com/2006/07/modifying-images-in-blogger-css.html
0
 

Author Comment

by:easycapital
ID: 35176701
Nice.

I will follow up on it on Tuesday.  I have to finish the other parts now.

Thanks brdavs, it looks very promising! :)
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer…
This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…

710 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