Logo image overly header image

  • Unknown's avatar

    In my current header, you will see my logo tucked behind the header image. My goal is to make my logo part of the header to seamlessly appear as a banner.

    I’ve tried z-index to no avail. I also tried using CDS in #header-image and I now am trying the menu layer. I’m out of ideas!

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar

    Oops! CDS, not CDS.

  • Unknown's avatar

    Ugh, sorry folks…typed this on my phone. The title should read “overlay” header image. I’m trying to bring an image to the foreground in the header, while using the random built-in WordPress header system…

  • Unknown's avatar

    Ok, I’ve obviously spammed my own post so feel free to delete this thread, admins…unless you think it will be useful.

    This is what I ended up putting into my custom CSS:

    #header {
    background-image:url('http://noarizona.files.wordpress.com/2012/02/logo_small.jpg');
    background-repeat:no-repeat;
    background-size:80px 80px;
    margin: 20px
    height: 100px
    position:absolute;
    z-index:90000;

    }

    Now I’ve got my logo floating over the built-in header system WordPress uses. I like having a random image, and this is just what I needed.

    I knew if I kept plugging away, I’d get it! ugh!

  • Unknown's avatar

    Glad to see you figured this out!

    I noticed the image at the bottom of your sidebar is too big for the space, if you adjust the size to something closer to 222px in the image widget settings on your Appearance → Widgets page, I think it will look better.

    I also noticed there’s some extra html in the code you posted and I’m trying to figure out how that’s happening. Is there any chance you could let me know how you copy and pasted that (was it from the CSS editor in your blog dashboard)? And also what browser and browser version you were using when you posted that code?

  • Unknown's avatar

    Thanks for pointing out the image! I went ahead and just removed it since I didn’t really need it.

    Not sure where the extra HTML is coming from. Where are you finding it? I did my modifications through the CSS panel using the latest version of Chrome. I suppose I should check all the major browsers to make sure it’s displaying properly.

    Any other feedback would be greatly appreciated!

  • Unknown's avatar

    Sorry I wasn’t more clear. I meant there is extra HTML in your code example that was pasted in the forums. It’s making this odd little display thing happen sometimes, and it looks like this: http://cl.ly/EF31 I’m trying to figure out how to reproduce that. If you have any ideas, lemme know. If not, no worries.

  • The topic ‘Logo image overly header image’ is closed to new replies.