Solved

Opacity or see through?

Posted on 2011-03-20
10
175 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
  • 5
  • 2
  • 2
  • +1
10 Comments
 
LVL 23

Expert Comment

by:jeremyjared74
Comment Utility
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
Comment Utility
Exactly what I wanted.  How can I do it, so that text remains at 100% white.

Thanks,
JP
0
 

Author Comment

by:easycapital
Comment Utility
Also, the video has a different section name?  It remained unchanged.
JP
0
 

Author Comment

by:easycapital
Comment Utility
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
Comment Utility
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
Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

 
LVL 10

Expert Comment

by:khan_webguru
Comment Utility
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
Comment Utility
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
Comment Utility
Can I add a png file in Blogger?
Thanks,
JP
0
 
LVL 3

Accepted Solution

by:
brdavs earned 500 total points
Comment Utility
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
Comment Utility
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

Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

Join & Write a Comment

Suggested Solutions

When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
This article discusses four methods for overlaying images in a container on a web page
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

763 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

6 Experts available now in Live!

Get 1:1 Help Now