Improve company productivity with a Business Account.Sign Up

x
?
Solved

Opacity or see through?

Posted on 2011-03-20
10
Medium Priority
?
243 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
What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

 

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

Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

588 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