Skip navigation
Currently Being Moderated

Opacity

Aug 8, 2012 3:07 PM

This is related to a previous post I'm still having trouble with.  I have this code in a css file:

 

h1 {

          font-size: 40px;

          font-family: Arial, Helvetica, sans-serif;

          color: #000000;

          border-right-style: groove;

          border-top-style: groove;

          border-bottom-style: groove;

          border-left-style: groove;

          border-right-width: thick;

          border-bottom-width: thick;

          border-top-width: thick;

          border-left-width: thick;

          font-variant: normal;

          text-transform: uppercase;

          font-style: normal;

          background-image: url(Images/background.gif);

 

          }

 

I'd like the background image to be see through but I can't seem to get Opacity to work.  Could someone please give me the exact code I would have to add to this code so that the background image would be, say 50% see through, and, which would also work on an ipad and iphone.  Thanks.

 
Replies
  • Currently Being Moderated
    Aug 8, 2012 3:16 PM   in reply to skronwith

    Resave this background.gif as a .png file, at 50% opacity. This will work across all browsers except maybe IE6 which has issues with opacity.

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 8, 2012 3:27 PM   in reply to skronwith

    Did you change:

    background-image: url(Images/background.gif);

     

    to

    background-image: url(Images/background.png);

    ?

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 8, 2012 3:32 PM   in reply to skronwith

    skronwith wrote:

     

    I did ithe conversion in photoshop.  Is there a special way to save it?  I just did a save as and typed in png.  Are there certain settings I should set?

     

    In Photoshop, Save for Web and Devices

     

    Select on the right "PNG 24" and make sure the transparency checkbox is clicked, hit save, select your destination and then load it into your site.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points