PDA

View Full Version : CSS Coding for background Image Opacity

campo
February 16th, 2007, 03:09 PM
Hi to you all!

Can somebody tell me what the CSS coding is to apply opacity to any background image which I might use ???

Many thanks,
campo
FrEaKmAn
February 16th, 2007, 03:22 PM
<html>
<head>
<style>
div {
background-image:url(forest.jpg);
filter:alpha(opacity=20); height:100%;
opacity:.90;
}
</style>
</head>
<body>
<div>some text here</div> <img src="forest.jpg">
</body>
</html>
campo
February 16th, 2007, 03:22 PM
I hope I myself plain just now.
I know that i can use something like this for a particular graphic:

<span style="float:left;filter:alpha(opacity=35);-moz-opacity:.35;opacity:.35;"><img src="/07/1crossfix.jpg" width="700" height="628" alt="" /></span>
which is what I do here. (http://www.ukapologetics.net/07/OPACITY.htm)

But I mean for the page background.
campo
February 16th, 2007, 03:24 PM
Oops! Thanks a bunch!!

That looks to be it.

Regards,
campo
campo
February 16th, 2007, 03:36 PM
Actually, that didn't work!
I used this:
<style type="text/css">
div {
background-image:url(1crossfix.jpg);
filter:alpha(opacity=20);
height:100%;
opacity:.90;

}
</style>

But it made no impression when I tried to adjust. Is this because I also used the following for the same page:

<style type="text/css">
body
{
background-image:
url('1crossfix.jpg');
background-repeat:
yes-repeat;
background-attachment:
fixed
}
</style>

Could they be combined??

campo
Buzz
February 16th, 2007, 06:17 PM
You actually need 3 declarations for all browsers.


<style type="text/css">
div {
filter:alpha(opacity=60);
-moz-opacity: 0.6;
opacity: 0.6;
background: url(image.gif) no-repeat 0 0;
}



you can combine the background property like so:

background: url(image.gif) repeat left top;

or

background: url(image.gif) fixed left top;

You can't have a repeating background image that is fixed and yes-repeat is not a property, just use repeat.

but... if it's a background image for the body.. you should not be using opacity. Just set the image up to look like how you want it to look.