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

[IanE]

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

In the html I’ve simply got:

logo

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!

[chrisburton]

@IanE Try adding `display: block;`

[IanE]

@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.

[Kitty Giraudel]

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.

[Paulie_D]

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.

[IanE]

@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.

[IanE]

@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.

[Kitty Giraudel]

No worries. Paths are evil.

[Author]

Posts