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

  1. johnnygjr
    Posted 3 years 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">
    			<!-- <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>


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

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

  3. johnnygjr
    Posted 3 years 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 Nevins
    Forum moderator
    Posted 3 years 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
    Posted 3 years ago #


    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
    Posted 3 years ago #





    Thanks for the help!

Topic Closed

This topic has been closed to new replies.

About this Topic