Trouble switching background images using CSS

@letsgetsillyJun 07.2006

I thought that I had this problem corrected, but unfortunately today it has resurfaced! I don’t understand what it is and how to get around it.

I am attempting to switch background images using CSS. The procedure works fine in Internet Explorer, but I am unable to see anything in Firefox. However, the links are still present, as my mouse can hover over them and the pointer will change.

When I place a background image inside the <div> within the style sheet, it will appear correctly. However, I am unable to get this to work when dealing with changing images on :hover, etc.

Attached is my current code from CSS:
a.menu {
clear: left;
border: 0px;
display: block;
z-index: 103;
width: 150px;
height: 40px;
direction: ltr;
top:0;
left:0;
/**outline:none;**/
background-attachment: fixed;
background-repeat: no-repeat;

}

a.menu.Home{background-image:url(../Images/navHome.jpg);}

Here is my HTML code

Any help will be greatly appreciated, I’ve spent my entire morning on this problem with no luck. Thanks again.

to post a comment

CSS

11 Comments(s) _↴

@GarySJun 07.2006 — #Can't see your site so I can't tell if this is approparite: use one .jpg with two images on it. Set things up so that in the normal state (a:link, a:visited) only one is visble, then change the position of the background for the a:hover,a:active states (e.g. background: position: 0 -20px).

Post back if this sounds like a possibility for you, and you need more details.

@letsgetsillyauthorJun 07.2006 — #Thanks for the help, although I'll have to ask you more details. But first, just to better describe my site (i don't have anywhere to post it) all I'm working on now is the main navigation menu that will be on the top of the screen. I have the "home" link in this example, but there will be 4 others.

I would simply like the graphic to change when the mouse is over the link, and when I click on the link and am directed to that page, I would like that image to change to a new static image.

But before I do that, I want to just focus on this. I am ok with any tricks that work, but I am unfamiliar with your description including "background: 0 -20px". Or perhaps you meant for :hover: background:0" ?-20".

My main concern is just seeing the images! It is frustrating to have it functional in I.E. but not Firefox.

Thanks for your help.

@GarySJun 07.2006 — #Sounds like what you're doing is perfect for what I'm suggesting.

At the moment, you have two images that are 40px high. The "trick" is to create one image that is (say) 90px tall = (40 for each of the "pictures", plus a gap of 10 between them) with [b]one of the pictures above the other[/b].

If you were to create such an image... the link would look... exactly as it does now (at least it will if the top picture is your "default" picture): the link is only 40px high, so the rest of the image is hidden.

That's default handled. The "trick" is not to change the image - that's no longer necessary - it's to [b]move[/b] the image that's already there (cached). The HUGE advantage is that this removes the flicker you'll get - even in IE - trying to swap an image.

To handle hover, the only think that's needed is:

background-position: 0 -50px

The "0" is the x-positon - no need to change that. The -50px is the y-position... exactly the right amount to bring the second "picture" up into view.

Voila - the perfect CSS mouse-over!

@letsgetsillyauthorJun 07.2006 — #Very interesting. I will give that a try. Right now I'm struggling to see anything in internet explorer, so I don't have a chance to do that.

I will give that a shot when I can get something going, thanks for the tip!

@letsgetsillyauthorJun 07.2006 — #When I use the <a> tag, my background images only show up when I have text <a>inbetween</a> them. How am I able to make my images display with no text?

@felgallJun 07.2006 — #Make them foreground images instead of background images.

@letsgetsillyauthorJun 07.2006 — #Ok I've got them to work. In order to get them to display, I had to have display:block on there, and an attribute for either width or height.

When I also did backgroundimage:fixed and backgroundimage-tile:no-tile, it would not display in firefox.

I will do the "double image" trick when I have time, but I have spent the majority of the day on this #*(@ problem, so for now I must go on to other things.

I will present an additional question: how can I make this same link change to another picture when it is selecte. I.E. when the user clicks on "home", it turns to a static picture with a new background that indicates where the user is currently located. When the user selects a new page, this link will then return to its original image.

Suggestions? Thanks for all the help here.

@GarySJun 07.2006 — #note that backgroundimage-tile:no-tile doesn't exist. it's background-repeat: no-repeat.

To give a different "look" to the current page, you need to add a "selected" class (or an id) to the current page link... and then style it accordingly. I mention giving it an id, as you already have two classes in the link. It might look like this:

<a class="menu Home" id="selected" href="Index.aspx"></a>

and the corresponding css would be:

#selected { }

@letsgetsillyauthorJun 07.2006 — #I apologize for the confusion, I know that no-tile etc. doesn't exist but I simply did not remember the correct semantics when posting.

Thank you for your reply on the "selected" style idea. That will work when I want to override the current style settings, but what I am trying to do is have the image change to a static "selected" image only after the user has clicked on the tab.

Perhaps this method you describe does work and I am not implementing it correctly, but again what I'd like to do is have the landing page have the menu with "standard" and "rollover" images, and after the user clicks on index.aspx from index.aspx (or any other page) THEN the image will change to a "selected" state, but not before.

This is difficult to describe properly, please let me know if it is confusing. Thanks so much for your help!

@ray326Jun 08.2006 — #Also, IE doesn't do fixed background positioning properly on anything but the body and I know of no workaround for that.

@GarySJun 08.2006 — #Perhaps this method you describe does work and I am not implementing it correctly, but again what I'd like to do is have the landing page have the menu with "standard" and "rollover" images, and after the user clicks on index.aspx from index.aspx (or any other page) THEN the image will change to a "selected" state, but not before.[/QUOTE]

Don't think there's a conflict: on one page the link has one kind of styling (in this case a "normal" and "hover"), and one another it has a different kind of styling (in this case "selected").

Here's one way you could do that:

[code=html]
 <a class="menu Home"               href="Index.aspx"></a>
 <a class="menuselected Home"   href="Index.aspx"></a>
 [/code]

***********************

Have you visited Stu Nichols' website? He has every flavour of css navigation - there's a good chance that you'd find an "off the peg" solution. Link is: http://www.cssplay.co.uk/menus/index.html

Also in #CSS _↴

applying a style to a link in a div's ID#Relative & Absolute DIVs...CSS Layout....Help

Success!

Help @letsgetsilly spread the word by sharing this article on Twitter...

Tweet This

Trouble switching background images using CSS

11 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

Trouble switching background images using CSS

11 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

11 Comments(s) _↴

Also in #CSS _↴