8 Replies Latest reply on May 17, 2007 3:15 PM by Newsgroup_User

    Background color opacity

    BruceMCE Level 1
      On my page I have a background image. I then have a div with a solid black background where all my content resides. I want to make it so the background color of the div is semi-transparent, so you can see the page's background graphic through the color. I've seen this done, so I know it's possible. I did try opacity: .50 but that made the whole div, and all the content semi-transparent, while I just want the background color semi-transparent. Any ideas?
        • 1. Re: Background color opacity
          Level 7
          On 15 May 2007 in macromedia.dreamweaver, BruceMCE wrote:

          > On my page I have a background image. I then have a div with a solid
          > black background where all my content resides. I want to make it so
          > the background color of the div is semi-transparent, so you can see
          > the page's background graphic through the color. I've seen this
          > done, so I know it's possible. I did try opacity: .50 but that made
          > the whole div, and all the content semi-transparent, while I just
          > want the background color semi-transparent.

          #inner_wrapper {
          background-color: #4a4a4a;
          opacity: .75;
          filter: alpha(opacity=75);
          }

          The 'opacity' is for Mozilla-based browsers; 'filter' is for IE. Browser
          support may be spotty; be sure to check in any browsers you care about.

          --
          Joe Makowiec
          http://makowiec.net/
          Email: http://makowiec.net/contact.php
          • 2. Re: Background color opacity
            Level 7
            Option B:

            Create a 1px by 1px 32bit .png file which is black (with your desired level
            of opacity) and set that as your background image for the content div. The
            catch is that IE6 does not support the 8-bit alpha channel of png files, but
            IE7 (and most other browsers) do.

            Not saying this is ideal, but it's another method to acheive what you're
            looking for. And the number of users using IE6 will only continue to drop.

            • 3. Re: Background color opacity
              Level 7
              On Wed, 16 May 2007 10:21:22 -0400, "Alexander Ross"
              <alexross@bleen.net> wrote:

              >Create a 1px by 1px 32bit .png file which is black (with your desired level
              >of opacity) and set that as your background image for the content div. The
              >catch is that IE6 does not support the 8-bit alpha channel of png files, but
              >IE7 (and most other browsers) do.

              There are ways to coax IE into compliance, at least for IE5.5 and IE6:
              http://testing.apptools.com/experiments/transparency/

              Gary
              • 4. Re: Background color opacity
                BruceCSI2 Level 1
                #inner_wrapper {
                background-color: #4a4a4a;
                opacity: .75;
                filter: alpha(opacity=75);
                }

                The 'opacity' is for Mozilla-based browsers; 'filter' is for IE. Browser
                support may be spotty; be sure to check in any browsers you care about.

                Yes, but that still makes the entire div (borders, content, etc) semi-transparent. I only want the background color to be semi-transparent.
                • 5. Re: Background color opacity
                  Lithium_Nitrate Level 1
                  quote:


                  Yes, but that still makes the entire div (borders, content, etc) semi-transparent. I only want the background color to be semi-transparent.


                  i've never tried this, so i don't know if it would work, but it's an idea that hit me.

                  what if you create another, specific div just for the black BG color you want transparency on, that matches the size of the text div. then lay the transparent BG color div between the pages main BG image and the text div on top?

                  or, as i think about it, you might not even need to make the BG div use the "background-color:" property. just drop in the transparent black color as an image, and then layer it (using z-indexing) between your main BG img and your text.


                  • 6. Re: Background color opacity
                    adambaum Level 1
                    I am actually trying to figure out how to do this also,

                    I saw it done on this site http://h3bmedia.com but then discovered that they are just darker images perfectly aligned......

                    I think Lithium has the right idea using a second DIV but I dont quite understand his/her exact instructions.
                    • 7. Background color opacity
                      Lithium_Nitrate Level 1
                      like this:

                      <DIV> for your main page BG

                      <DIV> for your transparent gif filter

                      <DIV> for your content at 100% opacity </DIV>

                      </DIV>

                      </DIV>

                      then double check your z-indexing to make sure the BG gif layer is set below your content div. (although the content should default on top of its parent layer by default, so this last step may not be necessary)
                      • 8. Re: Background color opacity
                        Level 7
                        On Thu, 17 May 2007 20:58:03 +0000 (UTC), "Lithium Nitrate"
                        <webforumsuser@macromedia.com> wrote:

                        > then double check your z-indexing to make sure the BG gif layer is set below
                        >your content div.

                        That really isn't necessary. See
                        http://apptools.com/examples/png-transparency/

                        Gary