Results 1 to 5 of 5

Thread: change background image opacity

  1. #1

    Thread Starter
    Member
    Join Date
    Jan 2006
    Posts
    55

    change background image opacity

    without editing a background image for my web page in photoshop is there code to change the opacity of the background image, if so can u post the code and where to put it in my html document? gracias

  2. #2
    PowerPoster Pc_Madness's Avatar
    Join Date
    Dec 2001
    Location
    Melbourne, Australia
    Posts
    2,765

    Re: change background image opacity

    HTML Code:
    <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>
    CSS can kinda do this..

    I think Opacity is one of those things that isn't supported very well.. across all browsers (not sure if IE supports it at all)

    You can't appear to specify an opacity for a page background (so <body background="url"> won't work), but if you wrap your page in a Div, you can set the opacity to the div and it should work (see my little test code as an example). I think you need to use opacity and filter, as IE understands filter (apparently) and FireFox seems to understand opacity... I dunno, have a read and see what you come up with

    Heres a great article for you read up on it
    http://www.mandarindesign.com/opacity.html

    CB will be able to answer this better I'm sure
    Don't Rate my posts.

  3. #3
    I'm about to be a PowerPoster!
    Join Date
    Jan 2005
    Location
    Everywhere
    Posts
    13,647

    Re: change background image opacity

    http://www.standards.spiralmindsinc..../css-testcase/

    Demonstration of CSS opacity, among other things.

    PcM is correct, IE uses filter (which is proprietary) and standards-compliant browsers recognise the opacity property.

    Bear in mind that there is no "background opacity" as such. Opacity applies to an element and all its children. So if you want background opacity without child element opacity I suppose you would have to make the semi-translucent element and then overlay another non-translucent element (with no background) over that.

  4. #4
    Kitten CornedBee's Avatar
    Join Date
    Aug 2001
    Location
    In a microchip!
    Posts
    11,594

    Re: change background image opacity

    Or use a partially transparent PNG as background. Of course, that again requires you to use an IE filter, because otherwise the PNG isn't loaded properly.
    All the buzzt
    CornedBee

    "Writing specifications is like writing a novel. Writing code is like writing poetry."
    - Anonymous, published by Raymond Chen

    Don't PM me with your problems, I scan most of the forums daily. If you do PM me, I will not answer your question.

  5. #5
    New Member
    Join Date
    Apr 2011
    Location
    Chennai, Tamil Nadu, India
    Posts
    2

    Re: change background image opacity

    Quote Originally Posted by CornedBee View Post
    Or use a partially transparent PNG as background. Of course, that again requires you to use an IE filter, because otherwise the PNG isn't loaded properly.
    This is the best idea i had used. Nice.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Click Here to Expand Forum to Full Width