Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

Change Background Image with CSS

10:28 am on Sep 17, 2011 (gmt 0)

New User

5+ Year Member

joined:Sept 17, 2011
posts: 3
votes: 0

I am a novice web designer and am having trouble finding how to code the following:

I need to have links that point to PDF files, change to a different image when each link is hovered.

I have four text-based links on a Menus page. Each link points to a different menu that is in a pdf format. So, when the link is clicked it will open a specific menu, respectively.

<a href="menu1.pdf>Menu1</a>
<a href="menu2.pdf>Menu2</a> ..etc

Now what I want is this:
Idle state - the background image will show the restaurants logo, Logo.png
Hover over Menu1 - change background image to show Menu1.png
Hover over Menu2 - change background image to show Menu2.png ..etc

I would prefer to stay away from scripts that can be disabled and work solely from CSS if possible. Any info and coding to make this work would be greatly appreciated. I am pulling out my hair and Google is failing me. Thanks in advance.
5:08 pm on Sept 19, 2011 (gmt 0)

Senior Member

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Nov 28, 2004
votes: 0

Welcome aboard PlantoSell, this is actually pretty easy. :-) This is one permutation of CSS sprites.

To start off, anchors (a) are inline by default. We change their display to block so they will react to width and height.

Our plan is to use one image for each menu*, and change the background-position on hover. So we start making each image twice the height you need it, and it has to be exact. So if logo.jpg is 30 X 20 pixels, we create an image in the graphics program at 30 X 40 pixels, with the "normal" state in the top half . . .


This will display through a 30 X 20 "window" showing only the top half.

Next, we need a way to "target" each menu item, and this is done by setting ID's on the anchors themselves. It's important to remember -ID's **must** be unique within a page. You can't have two ID's of the same value.

Also, I always like to recommend semantic HTML. A menu is, of course, a list of links . . . we'll add more CSS to make a horizontal menu out of that (if you need one.)

<ul id="top-nav">
<li><a id="menu_1" href="menu1.pdf">Menu1</a></li>
<li><a id="menu_2" href="menu2.pdf">Menu2</a></li>

All that's left is the CSS.

/* This part is as I mentioned - just to make a horizontal nav
The UL width will be the sum of your image-based navs
plus any paddings or margins */
#top-nav { width:82px; padding:0; margin:0 auto; }
#top-nav li { float:left; list-style:none; margin:0; padding-left: 8px; }

/* the display: block property allows us to use BG images for the anchors.
We use the text-indent property to allow "plain text" links for SE's
while using image-based menus for users. The text-indent sets the text
"off the page." In this scenario, menu_1 is 30 px wide, menu_2 is 40px wide,
so 30 + 8 + 40 + 8 = 82 - but the height, background attributes, and others
are common. */

#top-nav li a {
display: block;
height: 20px;
text-decoration: none;
outline: none;
background-position: top left;
background-repeat: no-repeat;

/* mouseover magic */
#top-nav li a:hover { background-position: bottom left; }
/* and here we go, the meat of the sprites */
#menu_1 { width: 30px; background-image: url(../images/menu_1.png); }
#menu_2 { width: 40px; background-image: url(../images/menu_2.png); }

That's pretty much the basics . . . have fun. :-)

*A more robust method is to use a single image for ALL of the menus and position them with pixel values in each "container." This has the advantage of loading only a single image on page load.
1:26 pm on Sept 20, 2011 (gmt 0)

New User

5+ Year Member

joined:Sept 17, 2011
posts: 3
votes: 0

Bill, thank you for your reply. However, I need to change the background image in the div where the links are located. I do not want image behind the links as they are text based links and I am fine with that.

Essentially, the links will open pdfs, but before they open while they hover I want images to change to give more action on the page then just the text links.

The div has extra height than the links require and I want the images to change in this open space. I think change the divs background image on hover is the best way to accomplish this. Or I can make another div if you can tell me how to change the image with the links in one div and the image in another.

I do not want images for the links or behind the links. The links I want to stay text based while change images in that div or another when the links are hovered.

I hope that better explains my needs. I hope you will respond will more info. Thanks.
4:05 pm on Sept 20, 2011 (gmt 0)

Senior Member

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Nov 28, 2004
votes: 0

So you have something like

<div id="image-container">
<li><a href="pdf1.pdf">PDF 1</a></li>
<li><a href="pdf2.pdf">PDF 2</a></li>

And it looks like

menu1 menu2

i don't know of a way to do that without using javascript because you're changing "some other element" and not the current anchor.
4:51 pm on Sept 20, 2011 (gmt 0)

New User

5+ Year Member

joined:Sept 17, 2011
posts: 3
votes: 0

Sort of:

Allow me to provide more details...

<div id="content">
<h3><a href="_pdf/GreatBeginnings_dark_web.pdf" taget="_blank">Great Beginnings</a> | <a href="_pdf/SandwichBoard_dark_web.pdf" target="_blank">Sandwich Board</a> | <a href="_pdf/SignatureDishes_dark_web.pdf" target="_blank">Signature Dishes</a> | <a href="_pdf/SpecialsandEvents_dark_web.pdf" target="_blank">Events & Specials</a></h3>

Applicable CSS:
#content {
height: 975px;
width: 960px;
background-repeat: no-repeat;
background-position: center center;

And what I need is that "theOakslogo.png" to change to "GreatBeginnnings.png" when they hover over the Great Beginnings text link and etc for each separate menu. However, when they are not hovering I want that "theOakslogo.png" to show.

I will use javascript, but I do not know much so the coding would have to be written for me. And if javascripting is disabled then I need at minimum for "theOakslogo.png" to show.

Thanks again. We are getting there.