?
Solved

Opacity or see through?

Posted on 2011-03-20
10
Medium Priority
?
236 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
Industry Leaders: 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 2000 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

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

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

When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
Suggested Courses

718 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