?
Solved

Website Div Question

Posted on 2011-03-18
4
Medium Priority
?
257 Views
Last Modified: 2013-11-05
I have a div that is basically a rectangle with a grey color, and then on top of that I have another div that I have a logo on top of that.  I want to make the first div have transparency so I add that code to the css file and it is making both the rectangle and the logo transparent.  HELP!!!!

here is my code below.

HTML
 <span><div id="box">
   <div id="logo" align="center"><img src="images/logo.png" />
     <span class="family">Loggers is a family owned and operated busincess since 19??.  We Specialize in         Indiana Hardwood Lumber                                   </span>                                        </div>
------------------------------------------------------------------------------------

CSS
#box {height:470px;
            width:250px;
            background-color:#CCCCCC;
            position:fixed;
            margin-top:0 auto;
            margin-left:100px;
            -ms-filter:“progid:DXImageTransform.Microsoft.Alpha(Opacity=90)”;
  filter: alpha(opacity=80);
  -khtml-opacity: 0.8;
  -webkit-opacity: 0.8;
  -moz-opacity: 0.8;
  opacity:0.8;}
0
Comment
Question by:sharris_glascol
[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
  • 2
4 Comments
 
LVL 9

Expert Comment

by:sah18
ID: 35165460
Is there any chance you could provide a link to the page?
0
 
LVL 16

Expert Comment

by:JF0
ID: 35165474
you can use a transparent png file for the background of your div. The CSS transparency works exactly as you see it.
0
 

Author Comment

by:sharris_glascol
ID: 35165485
www.digitalministriesdesign.com/Loggers

the image takes a bit to load I am working on that..  Also any help with getting the Box where the logo is to be 1 piece instead of 2 pieces above the menu bar would be much appreciated.
0
 
LVL 9

Accepted Solution

by:
sah18 earned 2000 total points
ID: 35165926
I haven't tried this, but found an interesting solution to the problem:
http://css-tricks.com/non-transparent-elements-inside-transparent-elements/

Also, read down into the comments -- there are some alternative suggestions which also may work for you.

I apologize for not providing a specific solution (complete with coding), but I'm swamped at the moment!

Post back if you give any of these a try & let us know if they are (or aren't) successful in eliminating the image transparency.

0

Featured Post

NEW Veeam Agent for Microsoft Windows

Backup and recover physical and cloud-based servers and workstations, as well as endpoint devices that belong to remote users. Avoid downtime and data loss quickly and easily for Windows-based physical or public cloud-based workloads!

Question has a verified solution.

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

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

764 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