Build Your Own Business Website header image

Styling the Agility Skin for Thesis 2 – Part 8 – Create Semi-Transparent Backgrounds in Agility

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

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.

When you set a single full width background image in the Agility Skin for Thesis 2, it can be the case that you want to use a semi-transparent background in the page content area to make the text stand out more. I used to do that with an actual semi-transparent image but you don’t have to do that anymore.

Use RGBA Color Values and Opacity

We can now do that using RGBA color values. Let’s start by looking up the RGBA to Hex conversion. So I know the hex for white is fff which this is telling me is 255, 255, 255 for RGBA. So if I want white but I want semi-transparent white I will use these 3 values, 255, 255, 255 and then an opacity in my background color designation.

What we’re going to do is come over to our content area page background and in our background color we’ll say rgba 255, 255, 255 and then for the amount of transparency, in this case, we’re going to say 0.5. Say okay to this and save our design options.

Now you can see this very subtle white background color sitting over the top of that and in fact, let’s do that with the feature box area background as well. Let’s get a light gray. So Hex to RGB. For the hex code let’s say cccccc so that’s the gray color and it’s RGBA is 204, 204, 204.

Let’s come back over to this background color and say rgba and 204, 204, 204 and 0.7 which is 70% opaque. Say okay to that, save our design options and refresh this. So 70% is probably too much so we’ll change it to .4.

Layering Semi Transparent Colors Over Background Images

Any of these colors will take an RGBA value so you don’t actually have to use the color picker or a Hex value. It’ll also take the RGBA value and so you can layer semi-transparent colors over the top of background images that are below it to achieve some fairly interesting effects.

In fact, let’s just take that area page background and take that up to 7 as well. So it’s mostly why you just see that color in the background. It’s pretty subtly but I’m totally enamored with this whole concept of semi-transparent colors.

Using the RGBA values I think makes for a very nice looking website when you’re laying backgrounds. But of course, that’s not what we’re really doing I just wanted to show it to you. Let’s get rid of these. Say okay to that, save it, reload it and we’re back to where we expected to be.

0 Comments… add one
0 comments… add one

Leave a Comment