SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Question Making Background Image Opaque

    Hello everyone,

    I want to put this image of ivy that I took behind my home page content. It was very convenient to set the background image for the container as this image I attached to the thread, but if I add opacity to the container, it will make my whole page transparent. Does anybody know a way around this?ivy.jpg

  2. #2
    SitePoint Member Serj's Avatar
    Join Date
    Nov 2011
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Need alot more info than this to answer your question, where is the HTML, CSS, Javascript?

  3. #3
    SitePoint Addict
    Join Date
    Jul 2011
    Posts
    365
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm not sure what the trick would be CSS wise. I have always wondered about that since I have come across the same problem. My solution has been to use Photoshop to lower the opacity in a layer above a flat color. Then save it as a JPG. But if anyone has a way to do it with CSS only, I'd be interested in that too.

  4. #4
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    It's possible to do. See here.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,177
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    You could probably also make the image semi-transparent in Photoshop and save it as a .png.

  6. #6
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Aren't .png images less compatible in general?

    That's a really large image. I want to shave it down to something tolerable in size and insert two images on the leftside and right side. Then for the the three side window graphics, I would have to reset the opacity to 1 and 100. This is my guess:

    Code:
    #leftside{
            background:url("ivyleft.jpg") no-repeat scroll 50% 300px transparent;
    	float:left;
    	margin:405px 0 0 0; 
    	width:auto;
            /*for IE*/
    	filter:alpha(opacity=30);
    	/*standard CSS3*/
    	opacity:0.3;
            
    }
    	#leftsidestart{
    		float:left;
    		background:url("sidewindowstart.gif") no-repeat scroll 50% 0 transparent;
    		width:27px;
    		height:250px;
    		margin:0;
                    /*for IE*/
    	        filter:alpha(opacity=100);
    	        /*standard CSS3*/
    	        opacity:1;
    	}
    	#leftsidebody{
    		margin:0 auto;
    		float:left;
    		background:url("sidewindowbody.gif") repeat-x scroll 50% 0 transparent;
    		width:240px;
    		height:250px;
                    /*for IE*/
    	        filter:alpha(opacity=100);
    	        /*standard CSS3*/
    	        opacity:1;
    	}
    	#leftsideend{
    		float:left;
    		background:url("sidewindowend.gif") no-repeat scroll 50% 0 transparent;
    		width:16px;
    		height:250px;
    		margin:0;
                    /*for IE*/
    	        filter:alpha(opacity=100);
    	        /*standard CSS3*/
    	        opacity:1;
    	}
    Let me know what you think about this idea.

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,177
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by etidd View Post
    Aren't .png images less compatible in general?
    No, they are fine. IE6 doesn't like transparent ones, but there are fixes for that if you care. I don't test IE6 any more.

  8. #8
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I think IE6 is obsolete, too.

  9. #9
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Blam! Check out this fall/winter background gif. atlantareviewgroup.com

  10. #10
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    When I want a background image to look semi-transparent, and there's no other images or stuff underneath that need to show through, I create a fake semi-trans png in my image editor and flatten it.

    Meaning, if the website background colour is white, and I need a faded-looking background image sitting on top of it, I just place a white layer under the image, lower opacity on the image on the upper layer, merge, flatten to 8-bit png if possible (if I need more colours I don't, but I still remove the alpha layer), upload. Much smaller filesize than a real semi-trans png.

    But if I need an image to be full-colour and only faded when peeking through a container sitting on top (like a centered main content box), I can do one of two things:
    use a small and tiled semi-trans png (like 8x8 or some multiples of 8 vert and 4 horiz) and let it tile the background of the container (this means IE6 gets a solid colour, you set this by saving your semi-trans png with the desired colour sitting as the background colour in your colour pallette), OR use CSS rgba(); background colour with a solid colour stated before that for IE6 and 7 (and 8?). More IE's get a solid colour but frankly, solid colours are easier to read on anyway. IE users get more win.


Tags for this Thread

Bookmarks

Posting Permissions

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