background image not displaying

[melindaf]

We have added a background image to the navmain wrapper but it is not displaying. it is displaying on our page as white space. Therefore our links are not showing because the text color of the links are white unil they are rolled over with the mouse and then they are seen in the pink color we applied to the hover state. Our css coding is:

#navMainWrapper, #navSuppWrapper, #navCatTabsWrapper {
background-color:#987c8a;
background-image:url(../images/bg_nav_background.JPG);
background-repeat:repeat;
color:#FFFFFF;
font-weight:bold;
height:1%;
margin:0;
padding:0.5em 0.2em;

usually I understand that a jpeg file should be named in lower case but the computer we are working on only allows for the file to be upper case JPG extension. So this is not our issue. Also I believe the url is correct.

Is there something missing or is there another file associated with the background of this div?

Any help is greatly appreciated.

The link to our site is www.bohemianglitz.com

[kuroi]

Your background image is displaying, you just can't see it.

What has happened is that you have attached the background image to the navMainWrapper div but then given that wrapper a height of just 1%. So its quite thin and sitting rather higher on the page than you think it is, mixed in with an element that has the same background.

The links that you can see when you hover over them, are actually overflowing the space that the div is occupying, and as overflow won't take the background with them.

[melindaf]

We have made the suggested changes but the background image is still not displaying? What are we doing wrong?

[afo]

Where are you expecting to see the background image? I'm seeing it in the right and left margins of the site.

Please consider optimizing your images. The site loads very slowly because the images are huge.

Also, you shouldn't be storing your images in the /classic folders or editing any of the files in the /classic folders. Create folders for your own custom template.

[melindaf]

The background image is suppose to be the same image used for the navigation-- it is purple and the space is showing white.

As i previously stated: "We have added a background image to the navmain wrapper but it is not displaying. it is displaying on our page as white space. Therefore our links are not showing because the text color of the links are white unil they are rolled over with the mouse and then they are seen in the pink color we applied to the hover state."

So if there is a link to an image that shows up in the other areas I have applied the image to --why isn't it showing up in the navmain links?

[afo]

navmainwrapper controls the navigation. I believe what you want is

/*wrappers - page or section containers*/
#mainWrapper {
	background-color: #ffffff;
	background-image: url(../images/bg_nav_background.JPG);
	text-align: left;
	width: 750px;
	vertical-align: top;
	border: 1px solid #9a9a9a;
	}

Add the line in red to the quoted area in your stylesheet and see if that's what you're looking for. Once you do that, you may have to adjust the color of some of the text.

[melindaf]

if I change the Main Wrapper it changes all of the page to the purple background image. That is not what we want. All we want is to change the white space at the top of the page above the logo image. So the colors when you look at the center and top of the page are :

a purple background stip at the top
then a white space with the Home and Login links-- this is the space we want a background image
then our logo is below this
then the navigation and the rest of the content which should be white to make it easy to see the product images and descriptions.

Any other suggestions??

[kuroi]

You changed the height from 1% to 100%. However, because the div has no intrinsic height, that's 100% of nothing (which also means that it wasn't actually showing before ). If you give it an explicit height (2em seems to work well), your background will appear.

[melindaf]

Thank you so much for the solution and your time. it is finally fixed and looking like we want it to.