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 1 – Understanding Background Images in CSS

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

Applies to -

Good morning everybody and welcome to this special session on How to Customize Thesis Skins with Background Images, Colors and Gradients. This is the first lesson in a continuing series called Customize Thesis 2.1 Like a Pro. I have a series like this for Thesis 1.8.5 and I am re-creating this with different information for Thesis 2.1.

Today we are going to be talking about backgrounds and we’re going to start off with understanding background images. So to begin with we have to understand what a background image actually is.

What is a Background Image?

In CSS a background image is a background style. It’s not HTML so it doesn’t occupy space, it doesn’t take up space in the flow of HTML and it doesn’t move things around. The background image lays behind whatever content it’s the background of without taking up any space and it’s designed specifically for content to sit on top of it.

Difference Between HTML and CSS images

For example, this background image on my website starts off with white and then comes to this black and then it has little white line and then it has this dark grey. This is a single background image that is 20 pixels wide and that tall and it repeats all the way across the top of this site. Everything else sits on top of it. So this menu sits on top of it and this logo image which is an HTML image which does actually take up space, it sits on top of it as well.

The difference between this background image and this logo is that this logo has an actual dimension to it. When I stick the logo in, its dimension moves everything down, it pushes the menu down. If the logo was 100 pixels smaller then the menu would be up 100 pixels higher.

There’s this HTML image that takes up space and moves spaces around whereas the background image does not take up space. By default when you define a background image for a container, it starts at the top left hand corner and then it repeats as necessary to fill the space. And by default it repeats in both directions so if I didn’t have any special styles for this background image here, it would repeat both horizontally and vertically until it filled the entire space.

Different Types of Background Images

This is the site that we’re working on in the WooCommerce class, this is a Thesis 2.1 site and this has a whole bunch of background images involved in it. First, it has this one big background image which is the background image of the body. In fact, if we move over here to the store this background image doesn’t move, it just stays right there. It’s attachment is at the top center instead of it at the top left so that when this shifts, the image is in the same place relative to the middle of the website.

Then it has this background image which is the background image of the menu and it sits behind the menu and it doesn’t repeat itself either. It’s also centered in the space rather than starting in the top left. Then we have this third background image which is the background image of the page, this board, and it doesn’t repeat horizontally but it does repeat vertically to fill up the space that needs it.

Now on top of that, we have this little white semi-transparent background image which actually fills the entire container. I think this background image is 20 pixels by 20 pixels so it’s a little tiny thing but it fills the container both vertically and horizontally.

Those are some different types of background images on this same site and you can imagine what the site would look like without any of those background images, right? Without these background images the site would be very clean and in fact, you wouldn’t recognize this as a Carta skin based website because of all the background images that are in it.

Properties of Background Images

Background images have properties and those properties are the actual URL or the address. In fact, let’s just go over to w3schools which is a free resource and is what I use all the time for checking syntax and verifying information. Here we are at w3schools and we’ll go to Learn CSS and then down to CSS Backgrounds.

Let’s look at the background image and it has the background image URL, it has a repeat property, it has an attachment property and it has a position property.

The URL, of course, is the address of the image. The repeat property is the property that tells it whether it repeats only horizontally, repeats only vertically, doesn’t repeat at all or repeats in all directions. The background attachment property determines whether or not the image scrolls with the document.

For example obviously, Laura’s image is not scrolling as we scroll up and down the page, this background image attachment property is fixed where the rest of the traditional background images are scrolling.

Finally, you have background position and as I said a moment ago by default they start at the top left corner. But they can start at the top center or the top right corner or the bottom middle or the bottom right or the bottom left or the center or some percentage or pixel or from one direction or another. So there’s a lot of different ways you can use this background position property and we’re going to look at some of them today.

That’s what a background image is. And the main thing I want you to take away from this is that the background image doesn’t take up space. So if you have a huge background image but a little tiny space, you’re only going to see that little tiny piece of the background image, you won’t see the huge background image.

If you put a background image in a container that has nothing in it, nothing is going to show because if the container is empty then the container doesn’t have any dimension and therefore, the background image won’t show.

And with respect to the background images, this is a question I see repeatedly. Someone will say “I stacked a background image in this thing but it’s not showing up”. And the answer is that the background image does not have dimensions so it will not make a container any bigger, it will only fill the container to the extent that the container has its own dimension because it has some kind of content in it.

Next I’m going to show you how to add a tiling background image to the body of a skin, discuss background properties and show two ways to add color to an area of your skin.

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