Site logo in header… what am I doing wrong?

  • Resolved johnnygjr

    (@johnnygjr)


    12 years, 4 months 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');
}
Viewing 5 replies - 1 through 5 (of 5 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

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

    Thread Starter johnnygjr

    (@johnnygjr)

    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: https://www.johnnygalbraith.com/betablog/

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    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.

    Thread Starter johnnygjr

    (@johnnygjr)

    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('https://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('https://www.johnnygalbraith.com/betablog/wp-content/uploads/2012/11/logo_sprite.png') 0 -140px;
}

    What am I not seeing?

    Thread Starter johnnygjr

    (@johnnygjr)

    Duh.

    a.logo-sprite

    and

    a.logo-sprite:hover

    Thanks for the help!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Site logo in header… what am I doing wrong?’ is closed to new replies.