|
CSS - Transparent Div With Image
Ok, I am going to try to describe the best way I can my problem. Hopefully I can be pointed into the right direction. Here is my CSS:
div.background { width:850px; height:1100px; background:url(images/Sunrise.png) repeat; border:2px solid black; margin-bottom: 15px; margin-left: 0px; margin-right: 0px; margin-top: 35px; padding-left:15px; padding-right: 6px; /* for IE */ filter:alpha(opacity=45); /* CSS3 standard */ opacity:0.4; } div.transbox p { margin:30px 40px; font-weight:bold; color:#000000; } I have a div.background box with an image and I want it to have a transparentency or opacity of 45. The text that is in my div.transbox p needs to be just like normal but my problem is is that when I view my page in the browser my text is also has a transparentency of 45. Not sure what is going wrong. Would someone be so kind to point me into the right direction? Thank you, Diana Similar TutorialsHi all, Can anybody tell me how I can put a transparent gif in the top right hand corner over an image? I wish I could just do it by making the image a background image and putting the gif over that, but I can't. Cheers. Hi. I would like to repeat a small slice the entire length of a <div> column, however when I try to do so, the final results show just a white column where the image should be. Does anyone know how to fix this? The image is transparent so that you can still see the background behind it. I have divs layering on top of each other, and they have background images (gifs). In Firefox, the transparency looks fine, but in IE the transparent areas are colored in. How can I fix this? thanks. Is it possible to place transparent text on an image? I want to display an image of some text in a fancy typeface, but superimpose text in a plain style, so that it can be copied and pasted; a bit like what you see in some PDF files, where the page image is visiable, the overlying text is not. Or maybe the image can over the text, but the text needs to be copyable? Regards, Ian Tresman Hello I have a background image in my web site which is centered and fixed with no repeat. I would like to make it some what transparent. I know that it can be done by manipulating the image itself, but I need to do it dynamically using CSS. I tried adding the filterpque(alpha=0.5 style=0) attribute to the body but that made all the elements in the body (except for background image) transparent. does anyone know how I can do it? Hi everyone. developing a page where I use CSS style #content { width: 760px; background-image: url(didyouknow1.png); background-repeat: no-repeat; background-color: #cccccc; height: 300px; } Page background is #cccccc. When I add the div tag <body> <div id="content">Content for id "content" Goes Here</div> </body> and preview in IE 6 there is a lighter color gray AROUND the image . Have not tested in FF. IMAGE Attached. Any suggestions how to make the tranparency really work? Looks fine in Dreamweaver8. Thanks Roman I know that IE reacts to CSS different than FF or Opera etc. I 2 columns (left & right). When the page loads it shifts the columns to the right & down a few pixels. When you roll your mouse over it they go into place. This only happens in IE. Also, I have an image that is 45% transparent. I saved it as a png and gif. IE will not display it as transparent. In FF & Opera it does. Then in Opera, the background image does not center. It aligns to the top. I know that they are some hack to fix these issues. I used Google, to try an resolve my issues. I my search terms must not have been correct. Here is what I am using thus far. CSS Code: Original - CSS Code body { background-image: url(images/main-bg.jpg); background-repeat: no-repeat; background-color: #495877; background-position: center; } h3, h4 { font-family: Verdana, Arial, Helevetica, sans-serif; font-stretch: wider; color: #000; } #leftcolumn { float:left; margin-top: 22%; margin-left: 20%; width: 120px; height: 250px; border: 1px solid #FAF0E6; background-image: url(images/fade_bg.png); background-color: transparent; padding: 5px; padding-left: 8px; font-family: Poor Richard;/*Verdana, Arial, Helevetica, sans-serif;*/ font-size: small; font-color: #FFF; } * html #leftcolumn { /*IE only style*/ margin-top: 22%; margin-left: 10%; padding: 0px; padding-left: 0px; margin-right: 0px; } #leftcolumn a { padding: 3px 1px; border: 0px solid white; display: block; width: 100%; text-decoration: none; font-weight: bold; color: #000; } #leftcolumn a:hover { background-color: #cca411; } #rightcolumn { float:left; margin-top: 22%; margin-left: 6%; width: 350px; min-height: 300px; border: 1px solid #FAF0E6; background-image: url(images/fade_bg.png); font-family: Verdana, Arial, Helevetica, sans-serif; font-size: smaller; color: #FFF; padding: 5px; padding-bottom: 8px; } * html #rightcolumn { /*IE only style*/ height: 300px; } .navindent { font-family: Scholar; /*Verdana, Arial, Helevetica, sans-serif; */ font-size: 10px; text-indent: 8px; color: #000;
body {
Learning CSS has been fun!! Thank You for any suggestions. I cannot post the site, since I am a new user, but I will try to explain the situation. I have several pictures which have 50% opacity. On hover, the picture becomes fully opaque. Additionally, every picture has a semi-transparent caption as an overlapping div. Chrome displays the situation correctly, however IE just cuts off the part of the picture underneath the div. So I am left with pictures that are cut off at the bottom. The fading is done by jQuery. Everything described above only happens to JPEGs, PNG-s don't have this problem. Everything works fine in Chrome, but IE doesn't want to cooperate on this one. I will try to select some of the relevant code: The image: Code: <img width="150" height="150" src="xxx" class="portfolio-image" onmouseover="$('td#pitem_1').css('filter', 'alpha(opacity=60)');$('td#pitem_1').fadeTo(300, 1); $('#ptext_1').fadeTo(300, 0.8);" onmouseout="$('td#pitem_1').fadeTo(500, 0.5);$('#ptext_1').fadeTo(500, 0 );">
First css attribute is to address an IE bug where first fade doesn't happen. #pitem_1 is the whole td containing the image and the caption div. #ptext_1 is the caption. Here's the CSS. Identifiers should be obvious. Code: table.portfolio td{
opacity: 0.5;
filter: alpha(opacity = 50);
-moz-opacity:0.5;
background: #FFF;
}
img.portfolio-image{
}
div.portfolio-caption{
margin-top: -23px;
height: 10px;
background: #000000;
font-family: Verdana;
font-size: 10px;
padding: 5px;
color: #FFF;
z-index: 999999;
opacity: 0;
filter: alpha(opacity = 0);
-moz-opacity:0;
}
I'd appreciate all suggestions and tips. Hey All! Hope i didnt scare tooo many people off with the title! Im new to playing around with transparency and am having trouble with getting the affect i want! What i want: 1. Page background as a large picture (1280 x 1024) non repeating etc. (The picture is of a grassey field) 2. a semi transparent rounded white box that sits in the middle (dimensions 735x 550) 3. on top of the semi transparent box i want my content. The reason i want it semi transparent is because i want the main background to come through and be visible through the content. and if the page is resized etc that the semi transparent box can move over the background and show the background whereever it is! Problems: 1. My first attempt i could get 90% of the look i wanted. I got the semi transparent box floating in the middle of the page and showing the background through perfectly. as soon as i add content the content is also transparent. i tried adjusting the trnasparency for the content but that didnt work. e.g. Code: <div id="semiTransBox"> <div id="content">blah blah blah</div> </div> note i dont have my actual code in front of me so please try and work with this! The wording "blah blah blah came out as transparent as its parent semiTransBox. Not what i wanted! I understand this is something to do with the parent child relationship with transparency so i tried something different for my second attempt: 2. i created the semi Transparent box and then added a second fully transparent div below which was positioned using css to move up 500px to fit over the semi transparent box. using top:-500px; position:relative e.g. Code: <div id="semiTransBox"></div> <div id="transBox"> <div id="content">blah blah blah</div> </div> The content is not transparent now but there is still a problem The problem is now because i have created the second div below the first it has caused the browser to add scroll bars to the window and shows white are where the main picture doesnt fill. is there a way to get rid of the space where the second div used to be? i really hope that essay made sense! thanks http://www.senti.ca/~kgf/programs/pickleball/ So here's the question... how do I make this picture, not transparent? Right now it's at 75% transparency on top of that background which makes it look very faded. Any ideas? I have tried: Code: filter:alpha(opacity=100); opacity: 1; -moz-opacity:1; And placing it inside of a div... sadly this doesn't work. hi, i have a container div, set at 50% opacity. i want my content to apear in here, but be 100% opacity. i thought this would work, but it doesn't... any help? #transContainer { background-color: #FFF; margin-left: auto; margin-right: auto; width: 982px; padding: 7px; height: 100%; padding-top: 0; filter:alpha(opacity=50); -moz-opacity:0.5; opacity: 0.5; } #mainContainer { background-color: #ccc; padding-top: 10px; margin-left: auto; margin-right: auto; width: 968px; height: 94%; filter:alpha(opacity=100); -moz-opacity:1.0; opacity: 1.0; } Dear all, I am really stuck on this. I cannot use an alternative, I have to use png. I must have transparency. As you know, IE6 doesn't 'do' transparent png. I have tried three different hacks and I cannot get any of them to work. I am a good traditional developer, but fairly new to web development. Terribly frustrated that I don't seem to be able to get even one of these hacks to work. Please do you know the link to a page that has an easy to follow png hack for IE6 that you know to work? At this point, anything goes, as long as it works! Best Jo Ok so I have a vertical menu, with menus that pop to the side... it looks fine in every browser except IE. For some reason, the pop up menus become transparent in IE. Relavent CSS: #nav, #nav ul {/* 1st level ul */ padding: 0; margin: 0; list-style: none; float: left; background-color: #000000; width: 130px; } #nav li {/* 1st level li */ position: relative; color: #ffffff; font: bold 12px arial; padding: .3em 0em .1em .3em; border-top: solid 1px #ffffff; } #nav li ul {/* 2nd level ul */ margin: 0px; padding: 0px; list-style: none; position : absolute; left: -999em; background-color: #CCCCCC; } #nav li ul ul {/* 3rd levl ul */ margin: 0px; padding: 0px; list-style: none; position : absolute; left: -999em; background-color: #CCCCCC; } #nav li li {/* 2nd & 3rd level li */ position: relative; color: #000000; border: solid 1px #000000; padding:3px; font-family:arial; font-size:10px; text-decoration:none; } /* and some link styles */ #nav li li a { display: block; color: #000000; text-decoration: none; } #nav li:hover, #nav li a:hover, #nav li.sfhover { color: #000000; background-color: #E5F5E9; } #nav li li:hover, #nav li li a:hover, #nav li li.sfhover { background-color: #F58219; } #nav li:hover ul ul, #nav li.sfhover ul ul { left: -999em; } #nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul {/* lists nested under hovered list items */ top: 0px; left: 9.1em; voice-family: "\"}\""; voice-family:inherit; left: 10.4em; z-index: 1; } referring to: <ul id="nav"> <li><img src="contents/images/navarrow.gif" border="0" />Content For ... <ul> <li><a href="/community/864/Builders/23414.html">Builders</a></li> <li><a href="/community/864/Remodelers/23415.html">Remodelers</a></li> <li><a href="/community/864/Architects/23416.html">Architects</a></li> <li><a href="/community/864/Suppliers/23417.html">Suppliers</a></li> <li><a href="/community/864/Consumers/23418.html">Consumers</a></li> <li><a href="/community/864/Manufacturers/23419.html">Manufacturers</a></li> </ul> </li> example: http://www.housingzone.com/index.asp?layout=news&industryid=23414 yes my friend has on her site scrollable screen separate from the fixed background but in the code its listed <style type="text/css"> table, tr, td { background-color:transparent; border:none; border-width:0;} body { background-color:91A4F3; now what would the optional choice of turning the transparent off? opaque? I am trying to use the IE workaround for PNG transparency (using the alpha filter). The trouble is it only seems to work on a fixed size image. Is there any way to successfully apply it to a repeating background? I can't seem to find any info on that so I am guessing it can't be done Hey all, i'm trying to create pop up note box capabilities. My test example is using digg (dot) com's login box. If you go to the site click on login box will pop up. And you will see the border around the box has a transparency to it. I've tried emulating it but to no avail. PHP Code: <a href='#' onclick="document.getElementById('notepad').style.display = 'block';">Open Notepad</a> <div id='notepad' style='display:none; top:150px; opacity: 1;'> <div class='notepad_body'> <div class='notepad_content'> Post a Note<br> Post a Note<br> Post a Note<br> Post a Note<br> Post a Note<br> Post a Note<br> </div> </div> <div class='notepad_footer'> </div> </div> That is the html to generate the box which works fine... the only problem is the border is solid, then if I change the opacity it turns the entire div box with opacity. Here is my css PHP Code: <style type='text/css'> #notepad { left:50%; margin-left:-315px; position:absolute; width:673px; z-index: 100001; } .notepad_body { background:transparent url(testbg.jpg) repeat scroll 0 0; padding: 40px 13px 10px 40px; } .notepad_footer { background:transparent url(footer.jpg) repeat scroll 0 100%; height:23px; } .notepad_content { background-color:#FFFFFF; max-height:900px; width:550px; } </style> Does anyone have a clue on what I am doing wrong or what I can do to make the transparency work just on the border? Thanks in advance Hi, I'm trying to create a transparent background for the main text part of a site. I have the following code in the .css file: Code: .dataContainer {
background-image:url('/images/transluscentbg.png');
*background: none:
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/transluscentbg.png',sizingMethod='scale');
padding:10px;
}
and call it he Code: <html><head>
<link rel="stylesheet" type="text/css" href="styles/kr.css" />
<meta name="description" content="">
<meta name="keywords" content="">
<script src="rollover.js" type="text/javascript"></script>
</head>
<body id={$styleName|lower}>
<!-- BEGIN OUTER WRAP -->
<div id="bodywrap">
<div id="logoSpace">
</div>
<!-- BEGIN MAIN CONTAINER -->
<div id="content">
<div id="contentBorders">
<div id="mainContent" class="clearfix map{$mapNum}">
<div id="navBar">
<div id="innerContent" class="clearfix">
{include file="nav.tpl"}
<div class="goContent">
<div class="dataContainer">
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem
ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
lorem ipsum
</div>
</body></html>
This works fine in Firefox, but .dataContainer has no transparent background in IE. HOWEVER! It does work in both IE and Firefox if, instead of using <div> tags, I put the content in a table (<table><tr><td class="dataContainer">). Anyone have any idea why this might be happening and how i might be able to get the <div> to work? Hey guys, I'm going to try an explain my problem as brief as possible. Okay, so, my wrappers/containers aren't showing up with my desired background color properly using Firefox 3. Could you guys look at the code below and possibly help me out? Thanks! index.php: Code: <div id="wrapper" class="content"> <div class="col1"> <h2 class="title">Top Stories</h2> <div class="inner"> <img src="images/featured_image.gif" class="featured" width="256" height="146" alt="" /> <h1><a href="#">Non Feugiat Egestas</a></h1> <p>Urpis in nec eleifend duis orci id, per felis libero, mattis nec qui eu porta ipsum. Felis amet porta ac convallis nostra aliquam, sed faucibus, fringilla ut donec lacus et. Felis nec, nullam eleifend porttitor dignissim. Rutrum fermentum vitae. In enim arcu velit neque, venenatis netus, donec leo facilisis, odio gravida sed scelerisque.</p> <ul><li><a href="#">Full story</a></li></ul> </div><!--/inner--> <img src="images/add-account-button.gif" class="button" /> <img src="images/its-price-button.gif" class="button" /> </div><!--/col1--> <div class="col2"> <h2 class="title">Section Title</h2> <div class="news"> <h3>Vim saperet dolores ea</h3> <p>Nusquam alienum accusamus nec te, vel ei velit tibique vituperata, nec id soleat recusabo deterruisset. Vim no scripta iuvaret principes, nam vocent expetenda sadipscing ei, detraxit takimata indoctum ne ius. Et vitae maior um appareat eos, sed an etiam voluptua pertinax. Sit puto iusto fabellas ea, admodum deseruisse vel ne. Mei ei mazim mandamus percipitur, ius ad numquam delenit gloriatur, ea esse consul timeam duo.</p> <p>Sea nullam saperet adipisci ad, noster mentitum recusabo his eu. Soleat incorrupte ex sea, kasd dicit atomorum eu mei. Cu mutat blandit ius, nec ex brute etiam falli. Sit an homero salutatus, cu usu dicant volutpat splendide. In qui legimus veritus pericula, nusquam abhorreant te vel, vivendo fierent instructior ei eum.</p> <p>Eu lorem dictas adversarium qui, soleat verear philosophia an vix. Vis adhuc paulo gubergren no, pri ex voluptua invenire forensibus. Eum te laoreet suavitate abhorreant, eu sit mutat iudicabit voluptaria. Pri falli utamur electram an, in periculis forensibus comprehensam qui. Ius omnis tibique cu, te sint dicant pri, viderer indoctum torquatos ad quo.</p> <h3>No tota tempor persius</h3> <p>Prima deseruisse necessitatibus nec an. Nec eius labores copiosae ad, posse nihil voluptua at sea, altera aperiam alienum has ex. Tantas putant nec et, per ea semper mediocrem. Ex eripuit imperdiet, pri ex quem eros epicuri, ius sonet meliore ei. Decore graeco maiorum at vel, ex mediocrem quaerendum sed, cum sonet detraxit convenire in. Eu quando soluta indoctum vim, vim zzril numquam vivendo et.</p> <p>Sea alterum antiopam te, minim postea his te. Has utinam dissentias in, enim aperiam sententiae eum cu, eu iusto iuvaret senserit his. Saepe suavitate efficiantur ea pri, sea ne elit ullum, vix in saperet oporteat. Laudem salutatus vis eu. No tota tempor persius has, ne erat altera maluisset quo. Fuisset iudicabit dissentiet te cum, te dignissim democritum signiferumque vix, in vix fierent oportere imperdiet.</p> </div> </div><!--/col2--> <div class="col3"> <h2 class="title">Quick Links</h2> </div><!--/col3--> </div> style.css: Code: #wrapper {
margin: 0px auto;
padding: 0px;
width: 1024px;
text-align: left;
background: #fff;
display: block;
}
#header {
margin: 0 auto;
width: 1024px;
text-align: right;
padding: 20px 0 20px;
}
.content {
background: #fff;
display: block;
}
.col1 {
float: left;
width: 282px;
padding: 15px 10px 25px 10px;
}
.col1 img.button {
padding: 10px 0 0 0;
}
.col2 {
float: left;
width: 400px;
padding: 15px 10px 25px 10px;
}
.col3 {
float: left;
width: 282px;
padding: 15px 10px 25px 10px;
background: #eeeee8;
}
.col1 .inner {
position: relative;
padding: 9px 6px 0 6px;
border-top: solid 1px #666;
float: left;
display: inline;
background-color: #eeeee8;
text-align: center;
}
.col1 .inner a {
margin: 0;
padding: 0;
text-align: left;
}
.col1 .inner a img {
margin: 0;
padding: 0;
text-align: center;
margin: 0 auto;
background-color: #eeeee8;
border: 1px solid #eeeee8;
}
/* border is a hack to remove white shadow at bottom of image QB #3851 */
.col1 .inner h1 {
margin: 0;
padding: 7px 0 4px 0;
text-align: left;
}
.col1 .inner h2 {
margin-top: 0;
margin-bottom: 0;
background-color: #eeeee8;
text-align: left;
}
.col1 .inner p {
margin-bottom: 5px;
text-align: left;
}
.col1 .inner ul {
padding-bottom: 0 6px 5px;
}
.col1 .inner ul li {
}
.col1 h2.title {
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
color: #666;
}
.col1 .inner h1 {
font-size: 18px;
font-weight: bold;
color: #003bb0;
padding: 0 6px 0 6px;
}
.col1 .inner h2 {
font-size: 11px;
font-weight: bold;
color: #000;
}
.col1 .inner p {
font-size: 12px;
line-height: 1.5em;
color: #333;
padding: 0 6px 0 6px;
}
.col1 .inner ul,
.col1 .inner ul li {
font-size: 12px;
font-weight: bold;
color: #003bb0;
list-style-image: url(../images/more_arrow.gif);
text-align: right;
}
.col1 img.featured {
border: 1px solid #000;
}
/*========= COLUMN 2 =========*/
.col2 h2.title {
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
color: #666;
padding: 0 0 10px;
border-bottom: solid 1px #666;
}
.col2 .news {
}
.col2 p {
font-size: 12px;
font-weight: normal;
}
/*========= COLUMN 3 =========*/
.col3 h2.title {
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
color: #666;
padding: 0 0 10px;
border-bottom: solid 1px #666;
}
|
|||||||