Background Image not working

AlexW · #1 (**permalink**) February 4th, 2011, 01:24 PM

Hi all, I'm working my way through the book but come across a problem when trying to set a mouse over background image to change. My menu code is:

<div id="menu">
<ul>
<li><a style="background: url(Images/Button.gif) no-repeat center center;" href="Default.aspx" accesskey="1" title="">Home</a></li>
</ul>
</div>

... and I added a style tag inside the head element:

<style type="text/css">
#menu a:hover, #menu .active a
{
background: url(Images/ButtonOver.gif);
color: #FFFFFF;
}
</style>

The colour changes fine but for some reason the image wont change to ButtonOver??? Any help would be much appreciated...

Imar · #2 (**permalink**) February 4th, 2011, 01:32 PM

Hi Alex,

Have you tried background-image, rather than just background? The latter works with the in-line CSS as you specify multiple properties for the short hand syntax.

Cheers,

Imar

AlexW · #3 (**permalink**) February 4th, 2011, 01:59 PM

Thanks for your quick reply Imar. I have tried background-image and all variations of the path, i.e. including ../ at the start, quotes, single quotes etc but no use. I have tripple checked the path and file names and file images and all looks good but it just wont work for me (this is driving me nuts!)... The colour change works fine but no background image change, here is the full page code:

<%@ Master Language="VB" CodeFile="Site.master.vb" Inherits="Site" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
#menu a:hover, #menu .active a
{
background-image:url(Images/ButtonOver.gif);
color: #FFFFFF;
}
</style>

<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
<link href="Styles/Main.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="Header" style="background: url(Images/Logo.jpg) no-repeat; background-position: center;"></div>
<div id="menu">
<ul>
<li><a style="background: url(Images/Button.gif) no-repeat center center;" href="Default.aspx" accesskey="1" title="">Home</a></li>
<li><a style="background: url(Images/Button.gif) no-repeat center center;" href="Default.aspx" accesskey="2" title="">About Us</a></li>
<li><a style="background: url(Images/Button.gif) no-repeat center center;" href="Default.aspx" accesskey="3" title="">Products</a></li>
<li><a style="background: url(Images/Button.gif) no-repeat center center;" href="Default.aspx" accesskey="4" title="">Services</a></li>
<li><a style="background: url(Images/Button.gif) no-repeat center center;" href="Default.aspx" accesskey="5" title="">Contact Us</a></li>
</ul>
</div>
<form id="form1" runat="server">

<div>
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>

Imar · #4 (**permalink**) February 4th, 2011, 02:37 PM

Hi Alex,

Ah, I see now. The non-hover images are applied in-line. Inline styles win from embedded style sheets. In other words, the image Button.gif is stronger than the Over image. Two ways to fix it:

1. Use !important:

Code:

#menu a:hover, #menu .active a
{
  background-image: url(Images/ButtonOver.gif) !important;
}

2. Define the original images through an embedded stylesheet as well. E.g. a menu like this:

Code:

 
<li><a class="menu-image" href="Default.aspx" accesskey="1" title="">Home</a></li>

combined with a class like this:

Code:

 
a.menu-image
{
  background: url(Images/Button.gif) no-repeat center center;
}

Hope this helps,

Imar

AlexW · #5 (**permalink**) February 4th, 2011, 03:19 PM

This works perfectly thank you. However I would like to remove the style from the page code and into my CSS page:

#menu a:hover, #menu .active a
{
background-image:url(Images/ButtonOver.gif) !important;
color: #FFFFFF;
}

- when I do this the buttons disappear instead of change on the mouse over, can I change something to correct this?

Imar · #6 (**permalink**) February 4th, 2011, 03:28 PM

You may need to adjust the path to reflect the location of the images relative to the CSS file that uses them. See Chapter 7, page 240 and further for more details.

Cheers,

Imar

AlexW · #7 (**permalink**) February 4th, 2011, 03:48 PM

Ah yes, because the CSS file was in a Styles folder I had to add ../ - thanks very much for your quick assisstance.