|
CSS - Image (png) Transparent And Div Tag Background Color
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 Similar Tutorialsis there a way to set background color of a text box to transparent? I expected this to be working: 'background-color:transparent; hello mates, for the "footer" of my webpage, i need to have the left part holding a transparent gif image (can be background image or html object, don't care as long as it shows correctly the background image of the page), and the right part to extend to the rest of the containing "footer" div, with a background-color. But i can't make the two cohabitate peacefully. :'( i've tried with divs, span and p, no matter what it does not work. here is the way i first thought it would work: Code: <div id="footer" style="clear:both;width:100%">
<div id="transparentImg" style="width:460px;height:22px;background:url(image.gif) no-repeat"></div>
<div id="colorstripe" style="width:inherit;height:22px;background-color:red;text-align:right">disclaimer</div>
</div>
any idea how to make this happen ? 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. 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? 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 Hi, I have a DIV container and inside there, I have another DIV used to contain images throughout the web site to float left, right - whatever. I set the background color to this container DIV (figure1) and my image went missing (in IE , Firefox displayed it correctly ). Does anyone have any ideas as to why or how I can fix this? Thanks. Code:
<div id="figure1">
<h2>Figure 1. The infectious path of rabies virus</h2>
<div class="imgspot" style="margin: 0 20px 0 0;"><img src="images/ani_raccoon_rabies_virus.gif" width="188" height="122" /></div>
<ol>
<li>Raccoon is bitten by a rabid animal.</li>
<li>Rabies virus enters the raccoon through infected saliva.</li>
<li>Rabies virus spreads through the nerves to the spinal cord and brain.</li>
<li>The virus incubates in raccon's body for apporximately 3-12 weeks. The raccoon has no signs of illness during this time.</li>
<li>When it reaches the brain, the virus multiplies rapidly, passes to the salivary glands, and the raccoon begins to show signs of the disease.</li>
<li>The infected animal usually dies within 7 days of becoming sick.</li>
</ol>
</div>
I'd like to have a table with a background image that does not repeat, and if the table extends below the height of the image, I want a solid background color. But this does not seem to work. Why? Code:
table.main {
border: 1px solid #01228a;
border-collapse: collapse;
background: url(./images/bluehills.jpg) no-repeat top
background-color: #01228a;
}
[EDIT] Sorry, the problem is while the bg image is there and does not repeat, the solid bg color isn't there... Imagine that the background image is supposed to fade into the background color... Thanks... Hi all, I am having difficulty with the background for an image link. I have the following: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Test page</title>
<style type="text/css">
a:hover { color: #FFFFFF; background: #0000ff; text-decoration: none; }
a:hover img { background: none; }
.box { background: #00ff00; padding: 1em; }
.box img { border: 0; }
</style>
</head>
<body>
<div class="box">
<p><a href="#"><img src="images/a1a8aa6a43.jpg" alt="" /></a></p>
<p><a href="#">Text link</a></p>
</div>
</body>
</html>
I have a global style for links that change the background color and the color of the text. However, this also changes the background color of an image link which makes it look odd. I attempted to fix this with Code: a:hover img { background: none; }
But this does not fix the issue. Any thoughts? I am using XHTML strict because the CMS I am using forces me to an XHTML stylesheet. Also, this is just a snippet of the code of the actual page but the bug is present in this snippet. I have just started writing a page and the first thing I did was establish a body background color and image. It works in IE but not FF. Can someone please give me a clue what is wrong. I have searched all the CSS books and the internet but I cannot find an answer. Thanks in advance. The URL is http://www.childrens-stories.me.uk/ I have a problem that I have never seen before. I am using css to set the background properties of the body tag. Works just fine in IE but no background at all shows up in Firefox. css code for the body tag is: body { background-color: #0d005e; background-image: url('images/bgmain.jpg'); background-repeat: repeat-x; } Any thoughts? Hi, Im trying to validate with CSS 3, but am getting one warning, which I really want to get rid of: Code:
body {
color: #000000;
background-color: #ffffff;
font-family: sans-serif;
font-size: 15px;
}
#header {
clear: both;
}
#topmenu {
width: 100%;
height: 30px;
color: #ffffff;
background-color: #990000;
font-family: sans-serif;
font-size: 20px;
font-weight: normal;
padding-top: 1px;
padding-bottom: 1px;
padding-left: 1px;
clear: both;
}
#topmenu a {
width: 150px;
height: 28px;
color: #ffffff;
background-color: #990000;
text-align: center;
text-decoration: none;
border-right: 1px solid #ffffff;
padding-top: 2px;
float: left;
}
#topmenu a:hover {
width: 150px;
color: #990000;
background-color: #ffffff;
text-align: center;
text-decoration: none;
border-right: 1px solid #990000;
float: left;
}
#body {
color: #000000;
background-color: #ffffff;
margin: 10px 0px 10px 0px;
clear: both;
}
#footer {
width: 100%;
color: #000000;
background-color: #ffffff;
font-family: sans-serif;
font-size: 12px;
font-weight: normal;
text-align: center;
border-top: 2px solid #990000;
padding-top: 5px;
clear: both;
}
#footer a {
color: #990000;
background-color: #ffffff;
font-weight: normal;
text-decoration: none;
}
#footer a:hover {
color: #990000;
background-color: #ffffff;
font-weight: normal;
text-decoration: underline;
}
#leftmenu {
color: #000000;
background-color: #ffffff;
width: 19.5%;
padding-right: 0.5%;
float: left;
}
#contents {
color: #000000;
background-color: #ffffff;
width: 58.5%;
padding-left: 0.5%;
padding-right: 0.5%;
float: left;
}
#rightmenu {
color: #000000;
background-color: #ffffff;
width: 19.5%;
padding-left: 0.5%;
float: right;
}
.contentbreaker {
color: #000000;
background-color: #ffffff;
width: 100%;
height: 10px;
clear: both;
}
.menubreaker {
color: #000000;
background-color: #ffffff;
width: 100%;
height: 10px;
clear: both;
}
.footerbreaker {
color: #000000;
background-color: #ffffff;
width: 100%;
height: 2px;
clear: both;
}
.menutoptitle {
width: 100%;
height: 26px;
color: #ffffff;
background-color: #990000;
font-family: sans-serif;
font-size: 19px;
font-weight: bold;
text-align: center;
border-bottom: 1px solid #ffffff;
padding-top: 1px;
padding-left: 1px;
padding-right: 1px;
}
.contenttoptitle {
width: 100%;
height: 26px;
color: #ffffff;
background-color: #990000;
font-family: sans-serif;
font-size: 19px;
font-weight: bold;
text-align: center;
border-bottom: 1px solid #ffffff;
padding-top: 1px;
padding-left: 1px;
padding-right: 1px;
}
.menu {
width: 100%;
color: #000000;
background-color: #eeeeee;
font-family: sans-serif;
font-size: 15px;
border-left: 1px solid #990000;
border-right: 1px solid #990000;
float: left;
}
.menu a {
width: 98%;
height: 19px;
color: #000000;
background-color: #eeeeee;
font-weight: normal;
text-decoration: none;
border-bottom: 1px solid #990000;
padding-left: 2%;
float: left;
}
.menu a:hover {
width: 98%;
height: 19px;
color: #ffffff;
background-color: #990000;
font-weight: normal;
text-decoration: none;
border-bottom: 1px solid #990000;
padding-left: 2%;
float: left;
}
.menucontent {
width: 96%;
color: #000000;
background-color: #eeeeee;
font-family: sans-serif;
font-size: 15px;
border-left: 1px solid #990000;
border-right: 1px solid #990000;
border-bottom: 1px solid #990000;
padding-bottom: 5px;
padding-left: 2%;
padding-right: 2%;
float: left;
}
.menucontent a {
color: #990000;
background-color: #eeeeee;
font-weight: bold;
text-decoration: underline;
}
.menucontent a:hover {
color: #990000;
background-color: #eeeeee;
font-weight: bold;
text-decoration: none;
}
.subcontentright {
color: #000000;
background-color: #ffffff;
text-align: right;
}
.content {
width: 98%;
color: #000000;
background-color: #eeeeee;
font-family: sans-serif;
font-size: 15px;
border-left: 1px solid #990000;
border-right: 1px solid #990000;
border-bottom: 1px solid #990000;
padding-left: 1%;
padding-right: 1%;
padding-bottom: 5px;
float: left;
}
.content a {
color: #990000;
background-color: #eeeeee;
font-weight: bold;
text-decoration: none;
}
.content a:hover {
color: #990000;
background-color: #eeeeee;
font-weight: bold;
text-decoration: underline;
}
.input {
color: #000000;
background-color: #ffffff;
width: 100%;
height: 13px;
}
.menuformcontainer {
color: #000000;
background-color: #ffffff;
width: 100%;
padding-top: 5px;
padding-bottom: 5px;
clear: both;
}
.menuformsubcontainer {
color: #000000;
background-color: #ffffff;
width: 100%;
clear: both;
}
.menuformlabels {
color: #000000;
background-color: #ffffff;
width: 50%;
padding-top: 2px;
padding-bottom: 2px;
float: left;
}
.menuformfields {
color: #000000;
background-color: #ffffff;
width: 48%;
text-align: right;
padding-top: 2px;
padding-bottom: 2px;
padding-right: 2%;
float: left;
}
.menuformsubmit {
color: #000000;
background-color: #ffffff;
width: 100%;
text-align: right;
padding-top: 2px;
padding-bottom: 2px;
clear: both;
}
http://jigsaw.w3.org/css-validator/...ut+with_options Please make sure you select CSS 3 and Warnings = ALL in order to see the 32 warnings... Thanks! Yours sincerely, speedbooster! 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? Are there any workarounds to get a transparent png that is being used as a background-image to be affected by background-: position, attachment, or repeat. This site says it's not possible: http://www.satzansatz.de/cssd/tmp/a...ansparency.html But Im hoping that over time someone has come up with a fix ... Thanks, Mark Hello, Tried searching and couldn't find anything. I want my header's background to match that of the body. Essentially, a "see-through" header. Shouldn't this be some easy markup? Thanks. Hi, I'm doing a simple one page layout for a friend which is just an iframe over a picture. The iframe can contain alot of data and the picture isn't supposed to repeat. So... I've got the background image fixed in place with the iframe positioned over it, and it looks fine in firefox and netscape, but the background of the iframe is white in IE. Nevermind, I figured it out... Thanks, Hope I was wondering if there is a way to make your wrapper have a background color to make your font more readable but still be transparent so that you still can see the body background pic? Hopefully this doesn't sound like a stupid question. Is that possible? What would be the code for that? Hi, The page in question can be found he http://serve5.net/xcage/. Basically, if you view it in Firefox/Mozilla, the background png for the element that contains the date is transparent with a tint to it. However, if you view the page in Internet Explorer, it is gray rather than transparent. Could someone take a look and tell me what's wrong? The CSS can be found he http://serve5.net/xcage/css/standard.css. Thanks, Rob. I have a floating div on top of a larger div that has a background. What I would like is to have the background of the floating div transparent so the background can be seen. However, when I make it transparent, it forces my text to be transparent also. Any ways around this? I want to make a css "div-popup", and when it pops up the whole page behind the popup should be covered in 50% transparent black. I suppose this has been done before, but I failed to google it, I don't know what to search for Any ideas? Hi everyone, I am using nivo slider for a website that I'm building. I have created a gradient png for the background of the captions that will go over the slider images. Everything is working perfectly in ie9 and FF, however in ie8 and 7 all I get is a big black block where the gradient should be. The strange thing is that if I set a background color, then the gradient shows through. I have tried to make the background transparent with no luck at all. I have tried to set the background-color to transparent, and made it !important. I've also tried to use filters, nothing seems to work. The URL of the site is http://www.backupstorage.co.za/new/ . If anyone out there can help, I really would be incredibly grateful! |
|||||||