Loading ...
Sorry, an error occurred while loading the content.

Div with semi transparent background

Expand Messages
  • Gordon Reeder
    I want to make a div that appears to float over the background image. So I m thinking of giving the div a semi transparent background color. So what I want to
    Message 1 of 11 , May 14, 2009
    • 0 Attachment
      I want to make a div that appears to float over the background image.
      So I'm thinking of giving the div a semi transparent background
      color. So what I want to do is make a checkerboard gif image
      with every other pixel transparent and use that as the background
      image.

      Would this work?

      I can make the gif image with Paint, or any other graphics editor.
      Any suggestions for a simple editor?

      How do I make a transparent color in the gif?
    • Bruce Schneider
      Gordon, I made a background image once, with many holes in it (transparent pixels.) Then I had a script to allow the viewer to change the background color of
      Message 2 of 11 , May 14, 2009
      • 0 Attachment
        Gordon, I made a background image once, with many "holes" in it (transparent
        pixels.) Then I had a script to allow the viewer to change the background
        color of the page. Each different background color would show through the
        holes, and give a somewhat different-looking background. Is this what you
        want to do?
        seecurb
        ++++++++++++++++++++

        On Thu, May 14, 2009 at 9:50 PM, Gordon Reeder <greeder@...> wrote:

        >
        >
        > I want to make a div that appears to float over the background image.
        > So I'm thinking of giving the div a semi transparent background
        > color. So what I want to do is make a checkerboard gif image
        > with every other pixel transparent and use that as the background
        > image.
        >
        > Would this work?
        >
        > I can make the gif image with Paint, or any other graphics editor.
        > Any suggestions for a simple editor?
        >
        > How do I make a transparent color in the gif?
        >
        >
        >


        [Non-text portions of this message have been removed]
      • Gordon Reeder
        Yes Bruce, That at is what I want to do. Well, the background image with the holes in it. But not the user interaction part. What is got me stymied is that
        Message 3 of 11 , May 15, 2009
        • 0 Attachment
          Yes Bruce,
          That at is what I want to do. Well, the background image with the
          "holes" in it.
          But not the user interaction part.
          What is got me stymied is that the images I use on all my pages are pictures
          or solid colors. Solid colors are easy, you call them out in the HTML.
          Pictures
          are easy, you take them with a digital camera or scan them. But when I
          approched
          this task, I realized that I don't have the tools to make the image that
          I want. How
          did that happen?

          So I guess that I'm asking for a recommendation for an image editor that can
          create GIF images with transparent pixels.

          Bruce Schneider wrote:
          > Gordon, I made a background image once, with many "holes" in it (transparent
          > pixels.) Then I had a script to allow the viewer to change the background
          > color of the page. Each different background color would show through the
          > holes, and give a somewhat different-looking background. Is this what you
          > want to do?
          > seecurb
          > ++++++++++++++++++++
          >
          > On Thu, May 14, 2009 at 9:50 PM, Gordon Reeder <greeder@...> wrote:
          >
          >
          >> I want to make a div that appears to float over the background image.
          >> So I'm thinking of giving the div a semi transparent background
          >> color. So what I want to do is make a checkerboard gif image
          >> with every other pixel transparent and use that as the background
          >> image.
          >>
          >> Would this work?
          >>
          >> I can make the gif image with Paint, or any other graphics editor.
          >> Any suggestions for a simple editor?
          >>
          >> How do I make a transparent color in the gif?
          >>
          >>
          >>
        • Bruce Schneider
          Gordon, Try irfanview. Its is free and good and can make the holes. I use .png format for images because you can edit the images without ruining them (when
          Message 4 of 11 , May 15, 2009
          • 0 Attachment
            Gordon, Try irfanview. Its is free and good and can make the "holes." I use
            .png format for images because you can edit the images without ruining them
            (when you 'save') as with .jpg format.
            ++++++++++++++++

            On Fri, May 15, 2009 at 3:07 PM, Gordon Reeder <greeder@...> wrote:

            >
            >
            > Yes Bruce,
            > That at is what I want to do. Well, the background image with the
            > "holes" in it.
            > But not the user interaction part.
            > What is got me stymied is that the images I use on all my pages are
            > pictures
            > or solid colors. Solid colors are easy, you call them out in the HTML.
            > Pictures
            > are easy, you take them with a digital camera or scan them. But when I
            > approched
            > this task, I realized that I don't have the tools to make the image that
            > I want. How
            > did that happen?
            >
            > So I guess that I'm asking for a recommendation for an image editor that
            > can
            > create GIF images with transparent pixels.
            >
            > Bruce Schneider wrote:
            > > Gordon, I made a background image once, with many "holes" in it
            > (transparent
            > > pixels.) Then I had a script to allow the viewer to change the background
            > > color of the page. Each different background color would show through the
            > > holes, and give a somewhat different-looking background. Is this what you
            > > want to do?
            > > seecurb
            > > ++++++++++++++++++++
            > >
            > > On Thu, May 14, 2009 at 9:50 PM, Gordon Reeder <greeder@...<greeder%40myself.com>>
            > wrote:
            > >
            > >
            > >> I want to make a div that appears to float over the background image.
            > >> So I'm thinking of giving the div a semi transparent background
            > >> color. So what I want to do is make a checkerboard gif image
            > >> with every other pixel transparent and use that as the background
            > >> image.
            > >>
            > >> Would this work?
            > >>
            > >> I can make the gif image with Paint, or any other graphics editor.
            > >> Any suggestions for a simple editor?
            > >>
            > >> How do I make a transparent color in the gif?
            > >>
            > >>
            > >>
            >
            >
            >


            [Non-text portions of this message have been removed]
          • Franki
            This might help a bit.. http://www.codingday.com/transparent-div-span-for-all-browsers/ I started playing with this back when I was looking into ajax apps. ...
            Message 5 of 11 , May 15, 2009
            • 0 Attachment
              This might help a bit..
              http://www.codingday.com/transparent-div-span-for-all-browsers/

              I started playing with this back when I was looking into ajax apps.


              Gordon Reeder wrote:
              >
              >
              > Thanks Gary,
              > I didn't know about those attributes. I'll experiment with that too.
              >
              > Gary Badger wrote:
              > > I don't know much about these things, but do you really want to use
              > images
              > > when you could use divs with background colors?
              > >
              > > CSS allows for:
              > >
              > > background:transparent;
              > > filter: alpha(opacity=50);
              > >
              > > ......... and so on.
              > >
              > > There are some samples at
              > http://www.cssplay.co.uk/opacity/colours.html
              > <http://www.cssplay.co.uk/opacity/colours.html>
              > >
              > > Cheers,
              > > Gary.
              > >
              > >
              > > ----- Original Message -----
              > > From: "Gordon Reeder" <greeder@... <mailto:greeder%40myself.com>>
              > > To: "CIGHTML" <cightml@yahoogroups.com
              > <mailto:cightml%40yahoogroups.com>>
              > > Sent: Friday, May 15, 2009 12:50 PM
              > > Subject: [cightml] Div with semi transparent background
              > >
              > >
              > >
              > >> I want to make a div that appears to float over the background image.
              > >> So I'm thinking of giving the div a semi transparent background
              > >> color. So what I want to do is make a checkerboard gif image
              > >> with every other pixel transparent and use that as the background
              > >> image.
              > >>
              > >> Would this work?
              > >>
              > >> I can make the gif image with Paint, or any other graphics editor.
              > >> Any suggestions for a simple editor?
              > >>
              > >> How do I make a transparent color in the gif?
              > >>
              > >>
              > >>
              > >> ------------------------------------
              > >>
              > >> To unsubscribe from the Yahoo Group, send an email to:
              > >> cightml-unsubscribe@yahoogroups.com
              > <mailto:cightml-unsubscribe%40yahoogroups.com>
              > >>
              > >> This list is for readers of Paul McFedries' CIG to Creating a Web Page.
              > >>
              > >> Messages prior to 2002 are also archived at
              > http://www.mcfedries.com <http://www.mcfedries.com>
              > >>
              > >> Yahoo! Groups Links
              > >>
              > >>
              > >>
              > >>
              > >>
              > >
              > >
              > >
              > >
              > >
              >
              >



              [Non-text portions of this message have been removed]
            • Gordon Reeder
              Bruce, thanks. I don t have ifranview, I have the other one Xnview. I did eventually find out how to set the transparent color. It s in the color map
              Message 6 of 11 , May 15, 2009
              • 0 Attachment
                Bruce, thanks.
                I don't have ifranview, I have the other one Xnview. I did eventually
                find out how
                to set the transparent color. It's in the color map function. But I
                did it. Sort of.

                You can see it at: http://mysite.verizon.net/g_reeder/indexnew.htm.
                This is not even close to what the final result will be. Eventually I
                will add borders to
                the divs and scatter them about page. How's that for breaking the box
                model?

                I have put the semitransparent background on the 2nd div. I got that
                part to work,
                but look what it does to the text. I did not expect that. Any ideas?


                Bruce Schneider wrote:
                > Gordon, Try irfanview. Its is free and good and can make the "holes." I use
                > .png format for images because you can edit the images without ruining them
                > (when you 'save') as with .jpg format.
                > ++++++++++++++++
                >
                > On Fri, May 15, 2009 at 3:07 PM, Gordon Reeder <greeder@...> wrote:
                >
                >
                >> Yes Bruce,
                >> That at is what I want to do. Well, the background image with the
                >> "holes" in it.
                >> But not the user interaction part.
                >> What is got me stymied is that the images I use on all my pages are
                >> pictures
                >> or solid colors. Solid colors are easy, you call them out in the HTML.
                >> Pictures
                >> are easy, you take them with a digital camera or scan them. But when I
                >> approched
                >> this task, I realized that I don't have the tools to make the image that
                >> I want. How
                >> did that happen?
                >>
                >> So I guess that I'm asking for a recommendation for an image editor that
                >> can
                >> create GIF images with transparent pixels.
                >>
                >> Bruce Schneider wrote:
                >>
                >>> Gordon, I made a background image once, with many "holes" in it
                >>>
                >> (transparent
                >>
                >>> pixels.) Then I had a script to allow the viewer to change the background
                >>> color of the page. Each different background color would show through the
                >>> holes, and give a somewhat different-looking background. Is this what you
                >>> want to do?
                >>> seecurb
                >>> ++++++++++++++++++++
                >>>
                >>> On Thu, May 14, 2009 at 9:50 PM, Gordon Reeder <greeder@...<greeder%40myself.com>>
                >>>
                >> wrote:
                >>
                >>>
                >>>> I want to make a div that appears to float over the background image.
                >>>> So I'm thinking of giving the div a semi transparent background
                >>>> color. So what I want to do is make a checkerboard gif image
                >>>> with every other pixel transparent and use that as the background
                >>>> image.
                >>>>
                >>>> Would this work?
                >>>>
                >>>> I can make the gif image with Paint, or any other graphics editor.
                >>>> Any suggestions for a simple editor?
                >>>>
                >>>> How do I make a transparent color in the gif?
                >>>>
                >>>>
                >>>>
                >>>>
                >>
                >>
                >>
                >
                >
                >
              • Gary Badger
                I don t know much about these things, but do you really want to use images when you could use divs with background colors? CSS allows for:
                Message 7 of 11 , May 15, 2009
                • 0 Attachment
                  I don't know much about these things, but do you really want to use images
                  when you could use divs with background colors?

                  CSS allows for:

                  background:transparent;
                  filter: alpha(opacity=50);

                  ......... and so on.

                  There are some samples at http://www.cssplay.co.uk/opacity/colours.html

                  Cheers,
                  Gary.


                  ----- Original Message -----
                  From: "Gordon Reeder" <greeder@...>
                  To: "CIGHTML" <cightml@yahoogroups.com>
                  Sent: Friday, May 15, 2009 12:50 PM
                  Subject: [cightml] Div with semi transparent background


                  >I want to make a div that appears to float over the background image.
                  > So I'm thinking of giving the div a semi transparent background
                  > color. So what I want to do is make a checkerboard gif image
                  > with every other pixel transparent and use that as the background
                  > image.
                  >
                  > Would this work?
                  >
                  > I can make the gif image with Paint, or any other graphics editor.
                  > Any suggestions for a simple editor?
                  >
                  > How do I make a transparent color in the gif?
                  >
                  >
                  >
                  > ------------------------------------
                  >
                  > To unsubscribe from the Yahoo Group, send an email to:
                  > cightml-unsubscribe@yahoogroups.com
                  >
                  > This list is for readers of Paul McFedries' CIG to Creating a Web Page.
                  >
                  > Messages prior to 2002 are also archived at http://www.mcfedries.com
                  >
                  > Yahoo! Groups Links
                  >
                  >
                  >
                  >
                • Bruce Schneider
                  Gordon, check this page: http://www.westbob.com/pagetwelve.html I can t find the page I mentioned earlier. +++++++++++++++++ ... [Non-text portions of this
                  Message 8 of 11 , May 16, 2009
                  • 0 Attachment
                    Gordon, check this page: http://www.westbob.com/pagetwelve.html
                    I can't find the page I mentioned earlier.
                    +++++++++++++++++

                    On Thu, May 14, 2009 at 9:50 PM, Gordon Reeder <greeder@...> wrote:

                    >
                    >
                    > I want to make a div that appears to float over the background image.
                    > So I'm thinking of giving the div a semi transparent background
                    > color. So what I want to do is make a checkerboard gif image
                    > with every other pixel transparent and use that as the background
                    > image.
                    >
                    > Would this work?
                    >
                    > I can make the gif image with Paint, or any other graphics editor.
                    > Any suggestions for a simple editor?
                    >
                    > How do I make a transparent color in the gif?
                    >
                    >
                    >


                    [Non-text portions of this message have been removed]
                  • Gordon Reeder
                    Thanks Gary, I didn t know about those attributes. I ll experiment with that too.
                    Message 9 of 11 , May 16, 2009
                    • 0 Attachment
                      Thanks Gary,
                      I didn't know about those attributes. I'll experiment with that too.


                      Gary Badger wrote:
                      > I don't know much about these things, but do you really want to use images
                      > when you could use divs with background colors?
                      >
                      > CSS allows for:
                      >
                      > background:transparent;
                      > filter: alpha(opacity=50);
                      >
                      > ......... and so on.
                      >
                      > There are some samples at http://www.cssplay.co.uk/opacity/colours.html
                      >
                      > Cheers,
                      > Gary.
                      >
                      >
                      > ----- Original Message -----
                      > From: "Gordon Reeder" <greeder@...>
                      > To: "CIGHTML" <cightml@yahoogroups.com>
                      > Sent: Friday, May 15, 2009 12:50 PM
                      > Subject: [cightml] Div with semi transparent background
                      >
                      >
                      >
                      >> I want to make a div that appears to float over the background image.
                      >> So I'm thinking of giving the div a semi transparent background
                      >> color. So what I want to do is make a checkerboard gif image
                      >> with every other pixel transparent and use that as the background
                      >> image.
                      >>
                      >> Would this work?
                      >>
                      >> I can make the gif image with Paint, or any other graphics editor.
                      >> Any suggestions for a simple editor?
                      >>
                      >> How do I make a transparent color in the gif?
                      >>
                      >>
                      >>
                      >> ------------------------------------
                      >>
                      >> To unsubscribe from the Yahoo Group, send an email to:
                      >> cightml-unsubscribe@yahoogroups.com
                      >>
                      >> This list is for readers of Paul McFedries' CIG to Creating a Web Page.
                      >>
                      >> Messages prior to 2002 are also archived at http://www.mcfedries.com
                      >>
                      >> Yahoo! Groups Links
                      >>
                      >>
                      >>
                      >>
                      >>
                      >
                      >
                      >
                      >
                      >
                    • Gordon Reeder
                      Thank you Franki. Works like a charm. So take a look at www.gordonreeder.com/indexnew.htm. Ignore the first div with the grey background. The next div uses the
                      Message 10 of 11 , May 17, 2009
                      • 0 Attachment
                        Thank you Franki.
                        Works like a charm.
                        So take a look at www.gordonreeder.com/indexnew.htm.
                        Ignore the first div with the grey background.
                        The next div uses the transparent pixels and background image.
                        The one after that uses opacity. Much better.

                        BTW: I'm glad to see that this group is still being monitored, even though
                        traffic has been a bit slow recently.

                        Franki wrote:
                        > This might help a bit..
                        > http://www.codingday.com/transparent-div-span-for-all-browsers/
                        >
                        > I started playing with this back when I was looking into ajax apps.
                        >
                        >
                        > Gordon Reeder wrote:
                        >
                        >> Thanks Gary,
                        >> I didn't know about those attributes. I'll experiment with that too.
                        >>
                        >> Gary Badger wrote:
                        >>
                        >>> I don't know much about these things, but do you really want to use
                        >>>
                        >> images
                        >>
                        >>> when you could use divs with background colors?
                        >>>
                        >>> CSS allows for:
                        >>>
                        >>> background:transparent;
                        >>> filter: alpha(opacity=50);
                        >>>
                        >>> ......... and so on.
                        >>>
                        >>> There are some samples at
                        >>>
                        >> http://www.cssplay.co.uk/opacity/colours.html
                        >> <http://www.cssplay.co.uk/opacity/colours.html>
                        >>
                        >>> Cheers,
                        >>> Gary.
                        >>>
                        >>>
                        >>> ----- Original Message -----
                        >>> From: "Gordon Reeder" <greeder@... <mailto:greeder%40myself.com>>
                        >>> To: "CIGHTML" <cightml@yahoogroups.com
                        >>>
                        >> <mailto:cightml%40yahoogroups.com>>
                        >>
                        >>> Sent: Friday, May 15, 2009 12:50 PM
                        >>> Subject: [cightml] Div with semi transparent background
                        >>>
                        >>>
                        >>>
                        >>>
                        >>>> I want to make a div that appears to float over the background image.
                        >>>> So I'm thinking of giving the div a semi transparent background
                        >>>> color. So what I want to do is make a checkerboard gif image
                        >>>> with every other pixel transparent and use that as the background
                        >>>> image.
                        >>>>
                        >>>> Would this work?
                        >>>>
                        >>>> I can make the gif image with Paint, or any other graphics editor.
                        >>>> Any suggestions for a simple editor?
                        >>>>
                        >>>> How do I make a transparent color in the gif?
                        >>>>
                        >>>>
                        >>>>
                        >>>>
                      • Gary Badger
                        Hey Gordon, thaat s much better than using images! ... From: Gordon Reeder To: Sent: Monday, May 18, 2009 9:44
                        Message 11 of 11 , May 18, 2009
                        • 0 Attachment
                          Hey Gordon, thaat's much better than using images!

                          ----- Original Message -----
                          From: "Gordon Reeder" <greeder@...>
                          To: <cightml@yahoogroups.com>
                          Sent: Monday, May 18, 2009 9:44 AM
                          Subject: Re: [cightml] Div with semi transparent background


                          > Thank you Franki.
                          > Works like a charm.
                          > So take a look at www.gordonreeder.com/indexnew.htm.
                          > Ignore the first div with the grey background.
                          > The next div uses the transparent pixels and background image.
                          > The one after that uses opacity. Much better.
                          >
                          > BTW: I'm glad to see that this group is still being monitored, even though
                          > traffic has been a bit slow recently.
                          >
                          > Franki wrote:
                          >> This might help a bit..
                          >> http://www.codingday.com/transparent-div-span-for-all-browsers/
                          >>
                          >> I started playing with this back when I was looking into ajax apps.
                          >>
                          >>
                          >> Gordon Reeder wrote:
                          >>
                          >>> Thanks Gary,
                          >>> I didn't know about those attributes. I'll experiment with that too.
                          >>>
                          >>> Gary Badger wrote:
                          >>>
                          >>>> I don't know much about these things, but do you really want to use
                          >>>>
                          >>> images
                          >>>
                          >>>> when you could use divs with background colors?
                          >>>>
                          >>>> CSS allows for:
                          >>>>
                          >>>> background:transparent;
                          >>>> filter: alpha(opacity=50);
                          >>>>
                          >>>> ......... and so on.
                          >>>>
                          >>>> There are some samples at
                          >>>>
                          >>> http://www.cssplay.co.uk/opacity/colours.html
                          >>> <http://www.cssplay.co.uk/opacity/colours.html>
                          >>>
                          >>>> Cheers,
                          >>>> Gary.
                          >>>>
                          >>>>
                          >>>> ----- Original Message -----
                          >>>> From: "Gordon Reeder" <greeder@...
                          >>>> <mailto:greeder%40myself.com>>
                          >>>> To: "CIGHTML" <cightml@yahoogroups.com
                          >>>>
                          >>> <mailto:cightml%40yahoogroups.com>>
                          >>>
                          >>>> Sent: Friday, May 15, 2009 12:50 PM
                          >>>> Subject: [cightml] Div with semi transparent background
                          >>>>
                          >>>>
                          >>>>
                          >>>>
                          >>>>> I want to make a div that appears to float over the background image.
                          >>>>> So I'm thinking of giving the div a semi transparent background
                          >>>>> color. So what I want to do is make a checkerboard gif image
                          >>>>> with every other pixel transparent and use that as the background
                          >>>>> image.
                          >>>>>
                          >>>>> Would this work?
                          >>>>>
                          >>>>> I can make the gif image with Paint, or any other graphics editor.
                          >>>>> Any suggestions for a simple editor?
                          >>>>>
                          >>>>> How do I make a transparent color in the gif?
                          >>>>>
                          >>>>>
                          >>>>>
                          >>>>>
                          >
                          >
                          >
                          > ------------------------------------
                          >
                          > To unsubscribe from the Yahoo Group, send an email to:
                          > cightml-unsubscribe@yahoogroups.com
                          >
                          > This list is for readers of Paul McFedries' CIG to Creating a Web Page.
                          >
                          > Messages prior to 2002 are also archived at http://www.mcfedries.com
                          >
                          > Yahoo! Groups Links
                          >
                          >
                          >
                          >
                        Your message has been successfully submitted and would be delivered to recipients shortly.