Background-image

[Jonas!]

Hi I had some issues getting the background-image to display. I tested different browsers to see if that was the problem, but no difference. I've done this so many times before, but now it just won't work. I even tried to do a test file to see if I could figure. I would appreciate help

- html

<div class="menu-1"></div>

- css

.menu-1{
display: block;
width: 21px;
height: 21px;
background-image: url('images/screen/menu-1.jpg');
}

[Jonas!]

I might add that the image appears when I add it as a <img> so the path is right.

[rtrethewey]

Keep in mind that stylesheets determine relative URL paths based on the location of the stylesheet. So if you're using an external stylesheet, the same URL that worked for an <img> tag will not work if that stylesheet resides in a different directory than the referring HTML document.

[Major Payne]

A div element is already a block level element:

.menu-1 {
width: 21px;
height: 21px;
background: url('images/screen/menu-1.jpg') no-repeat center scroll;
}

Really do need to use a class unless the image is to be used as a background image again on same page. I take it that the image is a 21 by 21 pixel image and not to be tiled?

[Jonas!]

rtrethewey - That was the problem, I assumed that I would just use the same path. But that is so obvious right now. Thank you, your a madman :P

Major_Payne - It's going to be reused, it's one of them long one-page websites.