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 3 – Using Multiple Background Images in the Same HTML Element

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

Applies to -

We’ve got our tiled background image added in our Genesis 2 Child Theme, Executive Pro, and we’ve played around with background image repeat and background image position. One of the great things about CSS3 is it allows us to add more than one background image to the same area.

Add Multiples in Same Area Using the Same Selector

So what we’re going to do is add a background image down here as well and this background image. It’s going to be the same blue color and will span the whole distance. It’s going to start at the bottom instead of the top so we’re actually going to stick that background image into body.

The way you add multiple background images to the same place is in that same selector. We’ll put a comma after this background image URL and then type url again and then parenthesis and opening and closing. Then what we’ll do is come back over to our Media Library and we’re going to pick up the footer background, grab its URL, paste that URL there.

Next we’ll do background-position, note that it’s red if you’ve mistyped it. So background-position. And for the first one, we’re going to say 0 0. Now we have our second one and in that case, we’re going to say center bottom; because we want it to start at the bottom. We also want to repeat in the X-direction, so we will put a comma there and put repeat-x.

Positioning Doesn’t Always Work to Adjust the Image Location

Let’s save our Custom CSS, come back over and reload this. Now when we scroll down here, you can see we have our background image here and it’s spanning the whole distance. Note that we have a space here of what looks like 2 or 3 pixels.

I was able to solve that problem up here by adding 1 pixel to the top. I don’t actually have that ability down here and the reason I don’t have that ability is because I don’t know for sure how far down this is. I could set it up from the top on this page just fine but if we came over to a page that was a lot longer or a lot shorter, I wouldn’t know exactly where it’s supposed to go. So I can’t give an absolute position from the top which means that I have to be more specific about getting my image right in this case.

The only real way to fix that is in the image itself. I’m going to come over to my footer here and canvas size and what I’m going to do is just make the footer 2 pixels taller. So I’ve got it 531, I’m going to make it 533 and add it to its height and then on this layer, add the color to the top of it and then save it.

We’ll call this one footer-background-2 then we have to upload that to our site, footer-background-2. I don’t need to get the address because I already know it so all I have to do is come over to this second one and say footer-background-2. Save the Custom CSS, reload it and obviously it needed one more pixel.

Is There an Online Resource to Make Background Images Without Using a Desktop Graphics Program?

Jaime asks, “Is there an online resource to make background images like this without using a desktop graphics program?”. Not that I know of, however, there are excellent free or inexpensive graphics programs that you can use.

I teach two of them here on my site, the one that behaves just like Photoshop is Photoshop Elements and it can be had very inexpensively, under $100 or something like that. If you’re on a PC, the other one that I teach on my site is called Paint.net. If you look for either of those on the site, Photoshop Elements or paint.net, you’ll see that I have tutorials on how to use those for creating things like background images like this.

Photoshop ended up as probably overkill for most people but Photoshop Elements is not too complicated. Photoshop Elements is a sleek, it’s well worth $100 because it makes optimizing images that you use online, not just creating images like this, much faster than say other tools.

Andrea mentions that there is a free online image editor called pixlr.com/editor, I’ve never worked with it before but that is something you might want to consider too.

Importance of Optimizing Your Images

You need some kind of an image editor regardless of what you’re doing because you need to optimize your images for the web. If you don’t optimize your images, you will end up slowing your site down significantly by forcing people to load images that are too large, much larger than is necessary.

Change the Background Color in the Footer Widgets

The other thing we want to do with this then is just change this background color as well. Let’s look at “wrap” here under footer widgets. Let’s inspect the element here, you can see it’s selected “wrap” but I can step up here to footer-widgets which is where that background color is coming from.

Come back over to the style.css and you can see .footer-widgets here. So I’m going to copy that, come back over to this and notice how I’ve got content here with that background color. I’m actually just going to put this rule in front of it with a comma. So now, it’s .footer-widgets and then this. It can be easier for you to read if you do that, if you put them on different lines.

So if you have .footer-widgets, and then the second line you’ve got .content .genesis responsive slider, they both have the same background color. Since the rule is the same, there’s no reason to write the rule twice. We’ll just save that Custom CSS, come back over here and refresh it.

Now we have this background color and background image spanning all the way across and we’ve gone quite aways to changing the way this Genesis 2 site looks simply with this combination of background colors and background images.

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
THIS IS A LIMITED TIME OFFER!
Subscription Options
0 Comments… add one
0 comments… add one

Leave a Comment