Build Your Own Business Website header image

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.

Part 7 – Using a Semi-Transparent Background Colors Over a Background Image

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

Applies to -

You’ve now seen how to add multiple background images in the same HTML element on a Thesis 2 skin so the next thing we’re going to do is add a page background color to this.

Choose the HTML Element for the Background Color

First we have to figure out what we want that to be a background of, which element. So we’re going to inspect the element. We could do content or we could do columns. We could do the whole thing, right? We could come up here to container and do all of container and that would fill everything with that color. We could do just columns too but we’ll start off with container. So div class=”container”, .container, background-color:#fff.

How Colors Can Be Specified

This does bring me to a conversation about how colors can be specified. Let’s come over here to w3schools again and look at background color. This shows us essentially 3 different color schemes that can be used.

It shows us the English language color scheme so background-color:white, background-color:yellow. It shows us the hexadecimal color scheme and it shows us an RGB color scheme and if you’ve watched me at all, you’ve seen me used both of these quite a bit.

Hexadecimal, RGB, RGBA, Predefined Colors

This hexadecimal color scheme is pretty much the default in the industry although there’s a lot of use for this RGB version. Let’s come over here to the legal color values for a moment because there are actually lots of legal color values. The real problem with some of them is that they’re not cross-browser compatible but hexadecimal colors work in all, RGB colors are supported in all, RGBA colors are supported in all of the most recent ones.

I didn’t know HSL colors were well defined and then there are a 147 color names that are predefined. All of these colors here have a predefined name. I think we’ll use GhostWhite as the color here so instead of #fff. So background-color:GhostWhite. Let’s save our Custom CSS, reload it and now we have this light white color that wrapped everything.

Actually, bear with me for just a second here, there are some artifacts leftover from an earlier demonstration that I need to get rid of. Let’s come back over to the Editor and Manager and Restore the Skin Defaults. Then refresh this, okay that’s what I expected it to look like.

Make the Background Color Semi-Transparent

Come back over here to the Custom CSS, okay and so we’ve got that GhostWhite color there and it is the background here but it covers the image so what we’re going to do next is take a look at a way to make this background color semi transparent.

In the one that I showed you before here with Laura’s site, I told you this was a background image, it’s actually not a background image. Let’s just double check by looking at “main-content-wrapper”. And no, it is this background color, so this is one way you could do it.

You could make a semi transparent background image and repeat it all over the place and that’s what was done here. However, what we’re going to do is use RGBA values for this and RGB stands for Red, Green, Blue.

Using RGBA Colors to Get Transparency

The RGB value of GhostWhite so GhostWhite is f8f8f8. I clicked on that just so that I could see what the RGB value is. What we’re really going to do is search for Hex Color to RGB and this is the one I like. So we’ll put the hexadecimal color in f8f8f8 and ask it to convert to RGB. It’s 248 248 248 and we’ll use the RGB color in there instead.

So now instead of background color, we’re going to say rgba. Then opening and closing parenthesis and inside that we’ll use those numbers 248, 248, 248. Now what we’re going to do is put an alpha value. RGBA stands for Red, Green, Blue, Alpha and the alpha value is the transparency.

Levels of Transparency

Let’s use the alpha value of 10%, 0.1 for example. That’s going to be very see through. Let’s save that, reload it and now you can barely tell right that there is something here. Let’s take it up to an alpha value of 0.7, it is a scale of 0-1 so a decimal point is really what you’re going to do there. If you want it entirely opaque, you just put a 1 in there. Reload this with the 0.7 and now you’ve got this white background color that allows you to view the content and still scroll.

Now you don’t have to have an image, you don’t have to have an http request, there is nothing that has to be stored or it doesn’t affect bandwidth. It’s a very light way of adding the semi transparent color in here. Now, there is a value called opacity and that is a different kind of value.

Opacity vs RGBA

Opacity makes the container and all of its contents transparent or semi transparent whereas RGBA just makes the color itself semi transparent but nothing else. I’ll show you an example, let’s apply opacity to the header.

Inspect the element and say div id=”header”, come over here and give opacity. So #header opacity 0.5.That’s actually going to make all of the contents of the header semi transparent. It’s hard to see here because that blue is consistent but this didn’t just turn to light grey, it actually turned semi transparent so that there’s something under it you could see it through the text

But you don’t want to use opacity to accomplish this, you want to use RGBA instead. Richard is asking, “Can opacity be applied to the background?” Well, the problem with applying opacity to the background is everything inside of the body would have that opacity. So sure, it’ll apply to the image but it’s also going to apply to absolutely everything contained inside the body which you wouldn’t want.

That’s why opacity isn’t nearly as useful especially for backgrounds because it makes everything in the container semi transparent or whatever opacity you apply it to and that doesn’t really accomplish the effect you want.

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
0 Comments… add one
0 comments… add one

Leave a Comment