Build Your Own Business Website header image

What is “Transparency” and what are Transparent Graphics?

Difficulty Level -

Filed Under Topics - , , ,

Listed Under Lesson Subjects -

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

This member asks what “Transparent” means in the context of web graphics. I offer a definition of transparency with respect to images. Then I describe the uses of a transparent graphic. I describe why I use the transparent image in the Thesis header image. I finally discuss appropriate file types for transparent images.

Video Transcript

Rick: So Brian, I’m turning your microphone on here for a second. Did you get the import of the transparent there?

Brian: No, no. I’ve never understood what the real significance of the descriptive term “transparent” with regard to graphics used on the web.

Rick: Well, there’s transparent and there’s transparency and there’s semi-transparent. And transparency on the web is a value that can be assigned to an image that allows stuff behind it to show through. So you can give an image a transparency of 0.5 which means that it… half of it… well, it’s essentially a 50% transparent image. That is, whatever that means you know, a relatively more stuff behind that can show through than say if it was a transparency of 1 which would be completely opaque, nothing can shine through. A transparency of 0.5 is… let’s in more through than a transparency of 0.7 and less through than a transparency of 0.3. So you’ve got this scale of transparency. If you’re a transparency of 0.0, it’s entirely transparent. None of its original image is displayed and everything behind it shows through. So that’s transparency. Now a transparent image in this case is a completely transparent image. That is, there’s absolutely nothing… it’s only really a space defined as transparent pixels and we use that as this header image so that we can use CSS to behind it, use various background images to get different appearances. So for example, if we just come over to this one here in fact… ‘coz in Lesson 5 is when I taught this, I believe.

And so, this is actually a transparent PNG with a background image behind it. The background image is set in CSS, the transparent PNG is uploaded with the header image and then you know, this is a different transparent PNG. That is… I’m sorry. Not a different transparent PNG, it’s a different header image that’s applied via CSS that sits behind the transparent PNG. So this is my new method of having clickable images, clickable header images that vary from page to page and they vary from page to page not based on PHP programming but they vary from page to page based on the body class of the page. Now, the answer to that question is not actually a beginner question really because this is…I mean, it is… in order to take advantage of any of that, you have to use you know, at the very least, custom CSS in order to then put an image behind it. But this is the method that I’m teaching now for having to have varying header images based on body class. And the reason I use body class instead of the way I used to which is with a php function is because really, that’s the purpose for the body class. The body class is there so that you can change the style or the appearance of that page or pages with the same body class. And so, it seemed to me like keePNG all of the… rather than having individual php functions that said, “Okay well, if it’s page demo 1, use this header. And if it’s page demo 2, use this header. Or if it’s page demo 1 and page demo 3 and category 5, use this header.” I think it made more sense to use the Thesis custom body class as the determinant for what image to use because all the rest of the styling can be affected that way too.

And so, if you keep all of your styling in the same place, that is, in your custom CSS file, and all the variations between page, you use a custom body class… then, you’ve got your appearance customization all concentrated in one place rather than scattered throughout your code. So that wasn’t even the question you asked but that’s why I have a transparent image. Now there’s another example of a transparent image on a site you saw me show yesterday which is this sea mom’s site I say I’m working on but I haven’t gotten anywhere with yet in the last couple of days. Oh, isn’t that weird. Right now, we should be seeing a slideshow here. There was a slideshow that used to be here. Somebody must have not liked those images and taken it out or somebody was fooling around with it. But anyway, in that slideshow, there were images that the images themselves were rectangular but they had this edge on them that of the color and then the top part of them shown through to this background so you can see this background.

So that was a transparent part of a regular image which was just another way of thinking about that. And let’s see, finally… what was that? Shoot, I’ve forgotten the name of that company already. Well, I can’t show it to you because I don’t remember the name of the company but I was going to show you the effect of transparent images on a page where this drop down here was not a solid color but it was a transparent image that so you could see the… you could barely see behind this, what was going on. But so transparency gets used in a lot of different ways. Does that make sense?

Brian: Yes, thanks Rick. A transparent image could only be saved in a particular type of format, couldn’t it? You couldn’t save it for instance, as a gif.

Rick: Well, you can save it… a gif can have transparent areas that is fully and completely transparent areas. So it can either color or nothing. That can… you can use a gif for that which is why it worked here on the Community Library Website because this is a gif image that we put in. So you can do it with a gif. There are two other file formats that you can do it in. You can do it as a PNG 8 and as a PNG 24. Now a PNG 8 behaves very much like a gif in that, it can only do solid colors or fully transparent areas. It can’t do semi-transparent. The only file format that will do a semi-transparent image is a PNG 24. And so, a jpeg can’t have any transparency whatsoever. If you have transparent areas in a jpeg, it will paint them white which was what I was afraid was happening in that Paint.net example.

Brian: Thanks Rick.

Rick: Okay, you’re welcome.

2 Comments… add one

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
THIS IS A LIMITED TIME OFFER!
Subscription Options
2 comments… add one
  • dean haycox January 8, 2012, 3:39 am

    Hi Rick.

    Do you use photoshop elements as well, or do you just use paint.net. If you do use photoshop to you have any tutorials on it.

    thanks

    dean

    • Rick Anderson January 8, 2012, 7:23 am

      Personally I use Photoshop CS5. I don’t have videos describing how to use it because it’s a huge topic that is very well covered elsewhere. We use Lynda.com as our tool for learning that sort of thing. I’m exploring the possibility of teaching some Gimp instead of paint.net. Mainly because it will work on both Mac and PC. So far paint.net seems easier to use than Gimp. I might just break down and buy a Mac and then teach one of the Mac based systems instead.

Leave a Comment