Grow your CSS skills. Land your dream job.

[Solved] Can’t get CSS logo to display?!

  • # February 13, 2013 at 9:37 am

    Hi, I’m having trouble with getting a CSS logo to display.

    In the html I’ve simply got:

    And in the CSS

    #logo {
    float:left;
    position: relative;
    width: 400px;
    height: 75px;
    background-image: url(Graphics/logo.png);
    background-repeat: no-repeat;
    overflow: visible;
    z-index: +2;
    }

    The logo has transparency and partly hangs down over the menu below it. I’m using HTML Boilerplate and it’s the first time I’ve used CSS. I’ve been going through online tutorials and all the references I can find, but nothing I’ve tried works. If I put the same image link into the html directly, it works fine. Any help greatly appreciated!

    # February 13, 2013 at 9:39 am

    @IanE Try adding `display: block;`

    # February 13, 2013 at 9:40 am

    @IanE, do you have a link? and it should be `z-index: 2` not +2, and if it’s overflowing to the menu below it, do `overflow: hidden`

    # February 13, 2013 at 9:42 am

    @chrisburton Thanks, but nope, still won’t display. I thought

    was a block element by default?

    @ChrisP Thanks, I’ve changed the z index. No link I’m afraid, I’ve not got the hosting yet. I should have said I meant it to hang down as part of the design.

    # February 13, 2013 at 9:42 am

    Since he is using a div as a wrapper, there is no point in defining display: block. Div are block-level elements by default.

    Z-index positive values don’t require the + sign. In fact, I suspect this + sign is parsed as a mistake by most browsers, thus the z-index line is not rendered.

    Other than that, I don’t see any issue in your CSS code. So it leads me to think that you have an issue in the path to your image. Check your path and beware, it’s case sensitive.

    # February 13, 2013 at 9:48 am

    It’s also irrelevant as I think Hugo has it but….

    overflow: visible;
    z-index: 2;

    probably aren’t needed unless you have something really weird going on.

    # February 13, 2013 at 9:57 am

    @HugoGiraudel Yes, I wondered about the path. I have double checked it, and it seemed ok, but I’ll triple check it!

    @Paulie_D The overflow and z-index are so the bottom half of the logo hangs down over the menu and top of the rest of the page. I’m not sure if that is a good way to do it, but I want to get the bones of the site done first.

    # February 13, 2013 at 10:03 am

    @Hugo You were right – I had the right path, but had stupidly missed a cap!

    Apologies everyone, and thanks for your swift replies and help.

    # February 13, 2013 at 10:29 am

    No worries. Paths are evil.

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".