CSS help

Hi i have a Joomla template. my banner CSS :

#header {
    width: 1000px;
    margin: auto;
    margin-top: 26px;
    height: 157px;
    margin-bottom: -1px; /* iPhone/iPad fix */
    overflow: auto;
    background-image:url(../images/header-bg.png);
    background-repeat:no-repeat;   
    background-color: #CF171F;

Code (markup):

can anyone brief me how can i add a hover image? when i move my mouse over this banner header-bg.png it should change to header-bg2.png

any help?

Sam

 

Ok, pure css.. I got it working with this code

<div id="header"></div>

HTML:

#header{
    display: block;
    width: 250px;
    height: 250px;
    background: transparent url('../images/header-bg.png') center top no-repeat;

}
#header:hover {
    background-image: url('../images/header-bg2.png');
}

Code (markup):

adapt the code as needed.

 

worked. thanks alot

 

If you're using pseudo classes make sure you put them in the correct order in your CSS file link :visited :hover :focus :active) if you put them in the incorrect order they won't function in certain browsers.

 

Thanks , GMF. That will be great information that you suggest over here. I am saying that I tried to go for your CSS styles. It really works to your whole detail. If I go for certain more CSS styles then Do you think so that It will work?