Search code examples
csswordpresspositionrollover

CSS rollover logo in wordpress

I'm trying to apply a CSS image rollover on a Wordpress header logo. I know this will be a really easy solution for you guys but i can't seem to find the answer anywhere on Stackoverflow. I think it may be to do with position but adding either :relative or :absolute seems to make no difference?

below is my CSS

#top {
height: 105px;
padding-left: 10px;
padding-top:27px;
}
#logo {


/*  background-attachment: scroll;
background-image: url(images/logo.png);
background-repeat: no-repeat;
background-position: left top;*/
height: 70px;
width: 461px;
 }

 #logo a:hover { 

background-attachment: scroll;
background-image: url('images/flatgrey.png');
background-repeat: no-repeat;
background-position: left top;*/
height: 70px;
width: 461px;


 }

 #logo a {

display:block;
height: 70px;
width: 461px;

& PHP

  <body <?php body_class(); ?>>

<div id="outer">
    <div id="top">
        <div id="logo">
            <?php               
            ob_start();
            ob_implicit_flush(0);
            echo get_option('imbalance_custom_logo'); 
            $my_logo = ob_get_contents();
            ob_end_clean();
            if (
            $my_logo == ''
            ): ?>
            <a href="<?php bloginfo("url"); ?>/">
            <img src="<?php bloginfo('template_url'); ?    >/images/logo.png" alt="<?php bloginfo('name'); ?>" /></a>
            <?php else: ?>
            <a href="<?php bloginfo("url"); ?>/"><img src="<?php echo      get_option('imbalance_custom_logo'); ?>" alt="<?php bloginfo('name'); ?>" /></a>             
            <?php endif ?>
Solution

  • I took out the background-attachment and background-position lines for #logo, so the style for #logo was this:

    #logo {
background-image: url(images/logo.png);
background-repeat: no-repeat;
height: 70px;
width: 461px;
 }

    And that seemed to work for me. Does it solve your problem?