Grow your business, income, & life.

Behind-the-scenes training to grow your business and generating income. Strategies and mindsets that work.

CSS3 Tutorial for Beginners: 23 Adding a Background Image Property

This is Sasha and welcome to another CSS training video. Today, what I’d like to do is show you how to use the background image property especially if you’re editing your business website this is extremely helpful as you get into images or using them throughout the background. Let’s take a look.

Here you could take a look. I have pink background but what happens if you go ahead and you want to use an image? Well, in this case what I’m showing you right now is actually the shorthand version. We used just the background and then we type in the color pink.

It’s important to know and understand that within that background property, you can actually write out code in this way. You have the background color, background image then the position or background size, background repeat, background origin clip, attachment and then it’s initial or inherit.

There’s many of these you probably won’t use but that’s actually the way to go ahead and do with the long form. I’m going to go ahead and comment it out real quick so that way you can see and keep that reference handy here in the future. But to simplify things and to just show you a training video concept, we’re going to get into the shorthand version here in a minute. I’m going to show you how you can add an image.

For example if you just type in background image right here and I go ahead and type that the way that you do do it as you go ahead and you type your URL. Now, if it’s on your local machine, you might type in, you know, photo.jpg or on the server at the same place where the stylesheet is. If it’s in a directory, you might have to type in something like images.

If it’s in the directory before the stylesheet on the folder, you might need to add in two periods and even sometimes multi-periods to get back directories. This is like the MSDOS mode or version.

In either case for me personally, we’re going to use an image right here from an actual address and we can do that as well. This is from Pixabay so I’m go ahead and hit save and you’ll see how that background all of a sudden gets changed to that picture.

It’s very difficult to see many of the text at the moment but you see there that I have that box model that we worked on in the past. But there we go, that’s basically the background image from a starting point. Now, when you get back into a background image in this case what you have to remember is that when you resize this browser you can see that it’s actually repeating, okay?

It’s actually repeating that background. What you may want to do is do something like – well, I’ll share with you some properties. They have background repeat right there and then what you could do is say no-repeat. If I go ahead and hit save that, now you can see it’s just one image in the background.

The other way to go ahead and structure or modify the image is the background size, okay? Here on the size, you can see this one as size up, well, I’d say it’s probably about a thousand pixels. If we resize it to let’s say 350 pixels right here by 350 pixels so that’s height or width then height then you can see right there. We resize it right there and it’s shrunk.

If I want a background repeat, I could do repeat-x, okay? I could change that and repeat-x would mean on the horizontal plane, okay? You could see it’s only on that top version. I can also change this to repeat-y, okay?

If I go ahead and save the CSS, you’ll see it’ll go straight up and down on that repeating factor or if I want to just repeat and you could just say repeat and now it’s tiled. You could do this 150 pixels and 150 pixels and you can see you can have like a little tile effect going there. That’s kind of interesting and neat I guess you could say.

That’s kind of the first few background related images that you could do. You could also designate a color here which if it doesn’t have an image then you’ll go ahead and use the color. We’ll say, “Okay. We’ll use the color let’s say pink in this case if there’s no background image.” But in this case there is an image.

Let’s just say we change this to a different URL, we hit save and now you can see that since that URL or that image doesn’t work it’ll default to pink. That’s kind of cool sometimes if let’s say you want to take that color tone right from here make it kind of like a yellow and match it up just in case people don’t have an image or the image is broken. It’s a good little safety precaution.

One final point I want to make on the background size is you could also do cover. You can see right there if I hit cover and go ahead and cover what this really does is – okay, let’s get rid of the background repeat and I’ll save that. What cover does is it actually stretches that image to confine right to the browser. Now this image is pretty large actually. Let me see if I could find a smaller image.

Let me see if I can copy image address and copy this image right there. There we go. Okay, this is a little bit of a smaller image but it really confines that as you stretch the browser, it stretches with it and it doesn’t matter how far I stretch it, you kind of see that effect happening. That’s another way to do. It’s kind of like doing a hero image but anyway that’s another variation for you to kind of take look at the background image property.

That’s the way you do it. If you wanted to re-shorthand this which you could actually do the background on itself here, background right there and you can see if you go back and you just type in background. This is the shorthand version, okay? What you can actually do is combine all these.

First you have the color, so again we could do color pink but if it doesn’t have the color we can do the URL right here which would be this then you could background position and size and background repeat. Position, we don’t need to position anything at the moment. Well, actually I didn’t show you that.

Let me just save that. If I say no-repeat, okay, and you can see it’s right there and I’ll do background position and I can do let’s say 200 pixels and 200 pixels. What this does is it repositions from the top and the left, okay? You can see it’s offset by 200 from the top and offset 200 from the left.

If I want 500 from the left and then 200 from the top, okay, then you put in 500 and 200. Basically this is x and y, okay? x is that 500, 800. If I change it to 800, you’ll see the x-axis there. If I change that to let’s say 100 and 500, you can see that that picture is offset by 500 from the top because again it’s x and y coordinates, okay, so in either case.

Getting back to our background position, so here we can see just a shorthand version, we go pink then we get the URL then the next way – let me just move this up for you, the next way that you go ahead is do the position if you have a position or size and background repeat. Let’s just remove of these so we can shorthand it.

You can see right there and if I want a size let’s just say 300 pixels by 300 pixels and then no-repeat, okay? You could see right there what it’s doing is it’s creating 300 by 300 offset on the position, okay? If you want 0 position, you go ahead and write 0 and 0 and then no-repeat, okay? You can see it doesn’t repeat.

That’s how you kind of do the shorthand version. Typically what I do with the shorthand version is I’ll just use something like the color or it might be like let’s say a color code. I might not even do the positioning right there and what I’ll do is add in the background let’s say size maybe as an additional property and I’ll say, “Okay. 350 by 350 pixels.”

It mixes both of those properties and then I could do background position right here which will be let’s say 500 from the x and 100 from the y. If you save that, you can see how you’re mixing and matching both the shorthand version and the longhand version simply because I don’t want to clutter too much on the shorthand version, just a little bit quicker since you don’t have to do the repeat, the URL, and the color right there all on separate line.

That’s kind of the better approach that I like to do but for you, you know, you might find your own way, of course you could throw in more things over here like initial or inherit, background clip, background attachment. Usually you don’t use those things so I typically don’t do that but any case for you, you might decide to do – to use them. Anyways, that’s the background property image and that’s ultimately how you use it.