www.webdeveloper.com
Results 1 to 4 of 4

Thread: Transparent PNG behind transparent DIVs

Hybrid View

  1. #1
    Join Date
    Feb 2005
    Posts
    97

    Transparent PNG behind transparent DIVs

    Hi! In need of some CSS expertise... I have a background image and opaque divs. I am trying to have '#bgGen' show as a background image but in front of '.mybg.jpg'. So, in my html I have the following:
    HTML Code:
    <div id="bgGen">
    My CSS is the following:
    Code:
    /* Background image */
    body { background-image:url('mybg.jpg');
    background-attachment: fixed;
    }
    
    /* Middle layer for background-- not working */
    #bgGen {
    	background-image: url('mymiddlebg.png');
    	background-position: center center;
    	background-repeat: repeat-y;
    }
    
    /* Front Divs with content and opaque background*/
    .mycontentdiv {
        background: none repeat scroll 0 0 transparent !important;
    }
    Hope I explained this correctly... The only way I'm seeing my png is to set the position: absolute but it breaks everything else on the pages.

    Any clues?
    Last edited by StaceyB; 11-10-2012 at 03:58 PM.

  2. #2
    Join Date
    Oct 2012
    Posts
    78
    Have you got a live version of the website? because I can't quite work out what your going for.

    Heres a good example of transparency/opacity.
    http://www.w3schools.com/css/css_image_transparency.asp

  3. #3
    Join Date
    Feb 2005
    Posts
    97
    No I don't. But I've attached an image that shows the layers I'm trying to achieve. Screen shot.jpgThe light middle bg layer is what's I'm trying to figure out. Thanks!
    Attached Images Attached Images

  4. #4
    Join Date
    Feb 2005
    Posts
    97

    Cool

    I GOT IT WORKING!! I had no idea you could have multiple background images. So I changed my css to the following:

    Code:
    body { background-image:url('front_layer_background_image.png'),url('back_layer_background_image.jpg');
    background-position:center, center;
    background-attachment: fixed;
    background-repeat: repeat-y,repeat-x;
    }
    Not sure if I wrote this 100% correct but it looks good in all browsers so far.
    My 'front_layer_background_image.png' is a transparency so I can see the 'back_layer_background_image.jpg' behind it!

    Thanks!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles