CSS Help
 
Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
User Name:
Password:
Remember me
Go Back   Dev Shed ForumsWeb DesignCSS Help

Reply
Add This Thread To:
  Del.icio.us   Digg   Google   Spurl   Blink   Furl   Simpy   Y! MyWeb 
Thread Tools Search this Thread Rate Thread Display Modes
 
Unread Dev Shed Forums Sponsor:
  #1  
Old January 19th, 2004, 05:14 AM
pythone pythone is offline
Junior Member
Dev Shed Newbie (0 - 499 posts)
 
Join Date: Jan 2004
Posts: 15 pythone User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 0
Question how to have a transparent background image in CSS

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?

Reply With Quote
  #2  
Old January 19th, 2004, 01:56 PM
terminal's Avatar
terminal terminal is offline
nx
Dev Shed Novice (500 - 999 posts)
 
Join Date: Aug 2003
Location: USA
Posts: 626 terminal Negative: is most likely a SPAMMER and a traitor to the cause. 
Time spent in forums: 5 h 28 m 37 sec
Reputation Power: 0
Send a message via AIM to terminal
i may be able to help you.
what you do, is place a <div> that spans across all of the width and height of the screen that has the filter and whose background-color matches that of your entire pages background-color:
Code:
<div style="background: #ffffff; width: 100%; height: 100%; position: absolute; top: 0%; left: 0%; z-index: -1000; filter: alpha(Opacity=47);"></div>

just add that anywhere within your body after youve changed the background: attribute and then from there you can test out how little opacity you want it to have. if you need any additional help, just ask.

[[[terminal]]]

Reply With Quote
  #3  
Old January 19th, 2004, 04:12 PM
pythone pythone is offline
Junior Member
Dev Shed Newbie (0 - 499 posts)
 
Join Date: Jan 2004
Posts: 15 pythone User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 0
it's a nice solution, but the problem is that when I set:
<div style="background-color:#003399; width: 100%; height: 100%; position: absolute; top: 0%; left: 0%; z-index: -1000; filter: alpha(Opacity=20);"></div>

Then the div streches itself from the (0,0) cooridnate all the way to the right, but it goes down only until it reaches the first element.

if I set the width and height to actual sizes in pixel it works fine, but the problem is that I don't know what the user's resolution would be and thus I cannot determine the size of the dive.

The percentage option looks more promising, but it seems that the solution still need a bit more twicking.

Reply With Quote
  #4  
Old January 19th, 2004, 04:44 PM
terminal's Avatar
terminal terminal is offline
nx
Dev Shed Novice (500 - 999 posts)
 
Join Date: Aug 2003
Location: USA
Posts: 626 terminal Negative: is most likely a SPAMMER and a traitor to the cause. 
Time spent in forums: 5 h 28 m 37 sec
Reputation Power: 0
Send a message via AIM to terminal
hmm...ic....well...there has got to be some type of javascript solution...im thinking making this div static so that when you scroll, it goes down with it, that is, if thats the problem youre talkin bout..

Reply With Quote
Reply

Viewing: Dev Shed ForumsWeb DesignCSS Help > how to have a transparent background image in CSS


Thread Tools  Search this Thread 
Search this Thread:

Advanced Search
Display Modes  Rate This Thread 
Rate This Thread:


Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
View Your Warnings | New Posts | Latest News | Latest Threads | Shoutbox
Forum Jump


Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
  
 





© 2003-2008 by Developer Shed. All rights reserved. DS Cluster 6 hosted by Hostway
Stay green...Green IT