Is it possible to have transparent background image using CSS3?
background: url(../img/bg_paperlines.jpg) repeat-x;
Using rgba(255,255,255,0.5) will set transparent background on the DIV, but the image will hide that.
I know I can have transparent <img>, but that's not what I'm after.
And I have to make sure that the text within the DIV is not set to transaprent.
You could use a PNG with alpha transparency instead of jpg.
You can have transparency using
opacity: 0.5;
but that's it, if you want per-pixel opacity, you have to use a image format that supports it like PNG.
Related
I have a division that I gave a black background color. The body of the HTML is yellow. What I want is the first black div to fade out.
I wanted to do this using a background-image. The background image is a png file that is black as well, but has a transparency from 0% on the left and gradually goes to 100% on the right.
If I also add this background-image to my division, it remains black.
I understand why this happens, because the image is transparent, and behind that image is still the black color. I get that. Is there a way to do it though? Is there a way to disregard a background-color where a background-image is positioned?
I rather don't create extra html elements if it ain't necessary.
You should use the linear-gradient CSS function for your div.
background: linear-gradient(to right, black, white)
Problem:
I have a png image as a jquery dialog title. The image corners are transparent (rounded corners)
When I display the dialog over a 50% opaque overlay I see that the corners are not transparent.
Solution:
The problem was the positioning of the image as a title. The non-transparent corners were not of the image but of the div containing it. It wasn't transparent even tough I set the background-color to transparent in ".ui-dialog .ui-dialog-titlebar"
The solution I found is to set the ".ui-dialog .ui-dialog-titlebar" margin-top property to "-18px" so the png image is positioned outside, hiding the corners of the div
thanks for the help
Basically I have a div that I want the background to be transparent.
<div id="modSideTop"><div id="modSideTopText">This Text Must Not Be Transparent</div></div>
The modSideTop div has a background image attached via css. What would the rest of the css that I need be to keep the text normal and the background transparent?
Thanks in Advance for your help!
Use an rgba color for the background rather than using opacity. For example, 50% translucent black:
background: rgba(0, 0, 0, 0.5);
Try it on JSFiddle.
Hi i am mentioning the property through which you can increase and decrease the opacity of background and that will not affect the text color its simple see the CSS basically you have to use the rgb color in background & alpa for opacity.
background:rgba(146,146,146,0.1);
or see the example:- http://jsfiddle.net/8LFLd/3/
I have two div's which looks like this
<div id="outer">
<div id="inner>
</div>
</div>
#outer {
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);
opacity:0.50;
}
The problem is that I get opacity and in the inner div. I know that I can put inner div outside the outer div, but this is not solution for me
Yeah that's because you are fading #outer and everything inside it.
If you are only trying to fade the background colour you have two options:
Use a transparent .gif as a background image.
use rgba. Rg. background-color: rgba(0, 0, 0, .6) is equals to Black with 60% opacity.
*EDIT*
Just realised it's for Internet Explorer 6, please be more clear next time.
In this case, rgba will not work, so give up on that.
You can still do so with transparent background image, but you'd need a jQuery plugin to make IE6 support .png images. Here's one http://jquery.andreaseberhard.de/pngFix/
Use rgba background colour to set opacity instead - your problem is just a standard css problem.
I have a page having the background image using:
background:url('gir.gif') scroll no-repeat 0 0 #foo;
I want to provide color on the top of the image, such that the image is looking like behind the color.
#bashu; it's a better to use rgba color transparency because it's not transparent you content at all.
background: rgba(0,0,0,0.3)
for IE
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000)";
you can create your rgba filter for IE for here http://kimili.com/journal/rgba-hsla-css-generator-for-internet-explorer/
check this for more Opacity of div's background without affecting contained element in IE 8?
The div with the background image should be separated from the div that holds your content and the background color.
The div with the content and background color should span the entire other div and have an opacity, or you can create a 1x1 transparant gif/png of the color instead.
Here is a jsfiddle example:
http://jsfiddle.net/AZk6c/
I would recommend using a transparant image as color instead so the text doesn't become transparant with the rest of the div. (unless there is no text in that div of course)