Build Your Own Business Website header image

How to Use a Sprite as a Background Image for a Link

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

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.

In this session, we talk about how to use a Sprite as a background image for a link on a page and discuss some different methods to achieve the goal. We review the code that a member has created for this purpose.

Video Transcript

Well, my question has to do with… in the past, I’ve been able to place a background sprite on a customer’s page and it worked fine. It was in a list element and somehow, I figured all that out. And now I’m trying to make a background sprite work just by itself. I’ve named it as a div but I’m sure that I have something off because I’m a little confused about, do I place the image on the page or does it only show up in the CSS? I’ve got styling set in my CSS. I’ve got a div named on the page but I’m not having anything show up on the page.

Can you give me a URL?

Yeah, it’s victoriaroche.com/experiment-page.

Okay and so what’s this image sprite going to do?

Well, click on the homepage and I can show you, easier than tell you. No, because I’ve got that… right there is great.

Okay.

It’s got the little button. I have to have a button that will be on top of that. It’s 5% bigger you know, 105% of that size so when you hover over it, it gets slightly larger. That’s what the sprite will do.

Okay so you… and is this an image right now?

It is.

Okay so you’ve got 2 images then. You’ve got this image and then you’ve got one that’s 5 pixels larger.

Yes, the image that we’re looking at here is not the sprite. It doesn’t have 2 images. This is just by itself on her homepage, on the experiment page is what I want to, I’m just experimenting with it. But yes, I do have a 2nd image that has 2 images on it.

Okay and should I be able to see something right now?

Well, that’s my question. Do I place the image on the page and then style it on CSS or do I just identify a div on the page and have the image show up through CSS? I don’t know if that’s a clear question but…

Well, yeah. Okay, that is… yes. What you would do is actually, you would… neither a div… it’s not a div and it’s not an image. You’d create a link and the link is to that location, whatever that location happens to be. So it’s an a tag and then that a tag has a class. And now the a tag shouldn’t have any contents. It shouldn’t have any.

On the page?

Yeah. If I were you, I would probably make this text and do it as a background and have this background color instead of background image. Then I would just change the height and width of the link when you hover so you don’t have a sprite at all. But if you want to use a sprite then you have 2 choices. One of them is that that the link has text in it and then the text should be clicked for a complimentary session or Call Victoria. That should be the link text and then the sprite is just the background image. But the trick is going to be that either the link itself is as big as the big image.

Of course, yeah.

So you’ve got a small image that has some transparent background or has this background color and then a big image that has less. Well actually, that’s what you would do. You would define the height and width of the link as being the size of the large image. You’d make the small image the same size as the large image except that the colored part of the small image would be smaller, right?

Right, right.

Then those images would be stacked on top of each other. You’d have one image actually with a small image and then the larger image below it so that you could use a position property to switch the image back and forth.

Right. Meaning, lower on the page.

Well, lower in the image itself. The image sprite, in order for it to be a sprite, you’re going to have both versions of the image in the same image actually. You’re just going to be displaying different parts of that image.

Exactly.

So conceptually, what you’re doing is you’re creating a link. You’re giving it a display of block because right now, a tag is not a block level element so that means it can’t automatically get a height and width. So you have to make a tag a block level element by saying display block. Once you’ve done that, you’ll give it its height and width and you’d give it the background image and then you have a hover version of that, same style which changes the background position so that the smaller appearing background image is no longer in position. It’s the larger appearing background image. So the HTML element is a link, not a div but a link.

You just code the link in?

In a text widget.

Okay, yeah, text widget. Alright, that’s what I’m asking.

Yeah. It’s a href equals such and such, title, blah blah blah.

Then if you display it as a block, that’s how you can give it height and width.

Right.

Alright. That’s what I was missing because I just have the div set in there and when you look at it, it’s a height of 0. And you know, obviously, nothing is displayed.

Yeah well a div without content is going to have a height of 0. You actually have to have content in there in order for that to happen unless you give the div an absolute height.

Okay.

So you could give a div an absolute height. You could say the div is 40 pixels tall and then it would be 40 pixels tall even if it had no contents in. But if it doesn’t have a content then it’s going to be 0 height.

Okay then can you make me the presenter for a second and I’ll show you some…

Sure. Let’s see.

I lost it, let’s see, show my screen. So I’ve not been using NetBeans. I heard you talk with Fran. I’m going to start using that and it looks like it’s all PHP but I can set up a thing where it will look at… tell me about CSS. Is that correct?

Yeah. If you use the PHP version, it comes with a JavaScript, HTML, and CSS highlight… code highlighting and checking as well. So you can create a CSS, that’s what I recommend using. That’s what I use.

Great, okay. I’ve never used it and I’d like to start doing that. That seems like a smart thing.

What code editor are you using?

I’m not. I just use a text editor. Like here, I’ve got in a big field on a database and I will change it as I need to and then paste it into the custom editor in Thesis.

Yeah so, I mean, that’s going rambo, right? I mean, you can certainly do it that way, you only do it that way if you’re really good, I think. Because otherwise, you make errors and something doesn’t work right and you can’t tell where you made an error because it’s you know, it’s hard to read and…

Well, I said in my email earlier to you today with this question that I know enough code to be dangerous. I think this is a perfect example of that. I don’t know good workflow practices and that’s when I… my ears perked up when you were talking with Fran. So this is what I have been doing so far.

Well, what you  should do is watch those first few episodes of Customize Thesis Like a Pro because it lays out what I recommend as a workflow system, including the tools and you know, file structure. And you get to see my system sort of repeated over and over and over again which is you know, edit it in NetBeans, save it, upload it in FileZilla, test it, come up with a concept in FireFox using Web Developer, test it in FireFox, do you like it, copy it out of Web Developer, paste it in NetBeans, upload it in FileZilla. It’s a system that gives you constant feedback and when I work on this other project here in a few minutes, you’re going to see that in action. But it’s definitely a system that works pretty well.

And you’ve got checks and balances and… okay, I’ll do that and thank you very much. I’ll look forward to the rest of the class.

Okay, you’re welcome. Oh actually, did I answer your question? I don’t think I answered your question yet though. You wanted me to look at this code for some reason or another, besides…

Well, the bottom code, the code down here is what is already working on another client site. It works perfectly as a background sprite. So what I did in my ignorant workflow is I took that code and I turned it into this code up top and this is the div. I mean, this again, is where I start.

Okay, so there’s your a display block, overflow hidden. That’s fine. So what you really start it off with is… I mean, this is using a list item and that’s fine. A list element can be a way of doing this. Often, sprites are in lists of links. You’ve only got a single one so what I would do is just looking up at your top code then, you have button a, display box overflow hidden. And actually, the background URL should be a property of a, not of F button, not a button but a button a, the background URL.

Not even .a?

Yes, button. Actually, it depends on your structure. If your HTML structure is a #button, that’s how you would you lay this out. You would have a #button because right now, #button a means that this applies to every link that is inside of some kind of a container called #button.

Yeah. That thing called #button is only the one instance. I’m going to put it on every page but I was doing that on purpose. I don’t know if that’s right or wrong though.

Well, what you really do is you want to start off with the HTML. Let’s start with HTML first.

Okay.

And so let’s just say in the HTML, a href equals…

Does it quote then?

Well yeah, but you need an opening tag, too. The opening part of the tag and…

Yeah, yeah.

Right. Yeah, quote and it doesn’t matter what the link happens to be here. You’re just going to put some link in there.

Yeah, I’d put the link down. Well, I mean, I could use those. We’ll make it work but…

And then after that, you’re going to say… well, no. That’s not the link. That’s a background image.

Oh, you’re right. That’s the hover but I’ll just say this for the moment. We’ll just…

Okay, we’ll pretend that’s a real link. That’s fine.

Yeah, I got…

Okay and then beyond the link, you’re going to say id equals so go space id equals quotation marks button. Okay and then you can close out your… or you could put your title equals and all the rest of the parts of a link. But in this case then, with that structure, #button a won’t work.

Alright.

In this structure…

Oh because this is the a.

Yeah, in this structure, what you need is a#button with no space in between the a and #. Okay, that’s the right way. Yeah, that’s the right way to refer to this selector. This selector is an a tag with an id of button. So in the CSS file, when you want to refer to that selector, it’s a#button because # stands for id and it’s the a that has the id of button.

And then I style that.

Then you add your styling to that. So it’s going to have display block, overflow hidden, height such and such, width such and such, background URL such and such. And you can leave the position at that point, you know, you don’t even have to put position in because it’s just going to go automatically to top left. And then the next selector or the next style rule would be a #button: hover and that’s where you would change the background position.

Right.

Right.

And then background position whatever and okay.

Right. And that’s the only thing you have to change though is just background position. You wouldn’t have to change, for example, you wouldn’t have to restate the image address because it’s getting its…

Just moving the image.

Right.

You’re just locating where it’s going to display. Well then, this is real helpful. Thank you. The question about this, it’s a little confusing. Your video on sprites on the background position, you were using, if I remember right, 0 on the X axis and the Y axis was a negative number? I was down to here. This has been successful for me down at the bottom using a positive number to move down the image.

It just depends on which way your image is built. Are you moving the image up or are you moving the image down? It just depends on what part of the image you want to look at. The way I build the images is I have the default appearance at the top and the next one below that and the next one below that and the next one below that. But you know, you can actually create the image so that the default is on the bottom or you can create the image so that it goes left to right. It’s entirely up to you.

Well, I’ll play with that because I did have my hover image, the hover part of the image below, just like you are doing and yet, I used a positive Y axis and it somehow displayed properly whereas you were using a negative Y axis. But I can play with that. That’s not an issue.

Well, and it’s easy to play with, right? All you have to do is add the minus and if it works, great. If it doesn’t then you know.

Well, believe me, I’ve sat around going, “Okay now, I moved this. What will happen?” That’s how I…

The main issue you have here is just that everything you were talking about styling right now needs to be part of the a tag, not part of #button, but it’s a#button.

I need to make the priority here the a, not the…

Well, no. You just need to understand the connection between the a and the id. If your HTML was actually div id button and you had an a inside that div, then it would be #button a. But since your HTML is a id = button then the selector needs to read a#button without any space. And it just depends on the HTML.

Well, here’s what I have put in originally on the page.

Okay, div id…

I don’t have an a except…

Okay so in that case, you’re fine. Div id equals, if that’s the way it looks then what you would do is you would still give your sprite definition to the a and not to the div. So it would still be a… in this case then, it would be #button a and all the styling would be associated with that. And then when you are going to move it, it would be #button a: hover.

Alright so referencing the a is where I have made the mistake up here, in this top code.

Well, you just have to be consistent.

I understand. And then would it be button a hover… a: hover?

It would be button a: hover, yeah.

Right. Alright so, okay. Now the link, when somebody clicks on that button, that’s put in place over here in… this is where I want people to go. I do that, I designate that on the page, correct? This is not the image that I want to have…

Yeah, the style definition goes in your CSS file. The class designation or the style designation, in this case, the id designation, goes in the HTML. But the style itself goes in CSS.

Which calls the image, etc?

Right.

Okay, alright. Great. Well then, I’ve got 2 options. I’ll play with that and see how I wind up and I’ll look into that. I think that covers it pretty well.

Perfect.

0 Comments… add one

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

Leave a Comment