Solved

Opacity or see through?

Posted on 2011-03-20
10
200 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
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
Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

 

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

Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

Question has a verified solution.

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

Suggested Solutions

CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

785 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