WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Site logo in header... what am I doing wrong? (6 posts)

  1. johnnygjr
    Member
    Posted 1 year ago #

    Hey everyone,

    I'm not a dunce at CSS and the basics of coding, but maybe I'm denser than I thought. I'm trying to place my logo in the header using CSS. And if/when that works, using a sprite on hover.

    I'm at a loss for why it won't display. Right now I'm having to resort to placing the image code directly in the header (which is currently enclosed by comment tags). Any thoughts?

    Header code:

    <header id="header" class="pagewidth">
    
    		<hgroup>
    			<!-- <h1 id="site-logo"><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
    			     <h2 id="site-description"><?php bloginfo('description'); ?></h2> -->
    
    			<!-- <a href="<?php echo get_option('home'); ?>/"><img src="<?php echo get_option('home'); ?>/wp-content/uploads/2012/11/ofb_logo.png"></a> -->
    
    			<span class="bg-img-test"></span>
    
    		</hgroup>

    Stylesheet:

    #header {
    	position: relative;
    	height: 180px;
    	border-bottom: solid 1px #ccc;
    }
    
    .bg-img-test {
    	background: url('image_here.png');
    }
  2. Andrew
    Forum Moderator
    Posted 1 year ago #

    So your .bg-img-test background image isn't loading?
    Is the browser console log throwing an image not found error?

  3. johnnygjr
    Member
    Posted 1 year ago #

    No image not found error.

    I initially tried this using a sprite and setting a class for the anchor tag. That wouldn't display an image, so I decided to strip it down to its most basic form and still no dice.

    Here's the URL with the logo clearly missing from the top left: http://www.johnnygalbraith.com/betablog/

  4. Andrew
    Forum Moderator
    Posted 1 year ago #

    You're applying it to an inline element. You need to display that inline element block and add heights and widths. Inline elements that have no values, by default have no height or width.

  5. johnnygjr
    Member
    Posted 1 year ago #

    Perfect!

    Now I'm stuck figuring out the sprite. I thought I could just apply this class to the anchor tag, but that's not working.

    <a href="<?php echo get_option('home'); ?>/" class="logo-sprite"></a>

    .logo-sprite {
    	background: url('http://www.johnnygalbraith.com/betablog/wp-content/uploads/2012/11/logo_sprite.png') 0 0;
    	display: block;
    	width: 450px;
    	height: 130px;
    }
    
    .logo-sprite a:hover {
    	background: url('http://www.johnnygalbraith.com/betablog/wp-content/uploads/2012/11/logo_sprite.png') 0 -140px;
    }

    What am I not seeing?

  6. johnnygjr
    Member
    Posted 1 year ago #

    Duh.

    a.logo-sprite

    and

    a.logo-sprite:hover

    Thanks for the help!

Topic Closed

This topic has been closed to new replies.

About this Topic