CSS rollover logo in wordpress
Question
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 ?>
2 answers
solution1
0 2011-01-21 02:58:13
I'm assuming you want to replace logo.png with flatgrey.png on rollover. If that is the case, you should get rid of the whole <img src=".../images/logo.png"...> tag and then add background-image: url('images/logo.png'); to the CSS of #logo a . You will also want to move the background-repeat: no-repeat; line from the CSS of #logo a:hover to #logo a .
solution2
0 ACCPTED 2011-02-05 17:13:17
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?
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.