Navigation background (image isn't there?)

[arnolfo]

Hello,

I’ve done this before however I cannot see why my code on this one is not working. I am using background images for navigation. I just can’t seem to find or see the error. Please help me see the error.

http://www.arnolfodesign.com/sites/FullScreenTest/index.html

I’ll figure out the dropdown menu position, but until then, I cannot figure out why my background images are not displaying.

My CSS is as follows:

colorNav {

width: 100%;
padding: 20px;
background: rgba(255,255,255, 0.5);
margin: 0;
height: 160px;
position: fixed;
left: 0px;
top: 0px;   
}

colorNav > ul{

width: auto;
margin:0 auto 0 10px;
float: left;

}

colorNav > ul > li{

list-style: none;
display: inline-block;
line-height: 1;
margin: 10px;
position:relative;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
border:2px solid #FFFFFF;
text-align:center;
width: 90px;
height: 120px;

}

#colorNav > ul > li > a{
color:inherit;
text-decoration:none !important;
padding: 0px;
font:bold 14px "Arial";
height: 120px;
width: 90px;
display: block;
}

/with styles applied to the list a/

colorNav li a.photo{

background: url(images/photo.jpg) no-repeat fixed left top;
display: block;
height: 120px;
width: 90px;

}

Thanks in advance!

-a

[wolfcry911]

remove the ‘fixed’ from the background statement

[arnolfo]

Wolfcry911,

Ah. I see that does work. I had thought ‘fixed’ would keep the image in place within the li a.

But this only applies in a “body” tag?

Thank you for correcting this.

a

[Author]

Posts