Background image not in the background

HTML & CSS
1

Hi,

I am trying to get an image in the background with links over the image at the top right.

The problem is my code just adds the image and adds a list of links to the top right below the image. I need the image to appear in the background. And the links to appear over the image in the top right.

This is my code, which is wrong. How do I specify the image to appear behind the other code? I apologise for the fact that I have just pasted section of code but you will notice what I have done.

<body>
    <div id="outer">
    <div id="header">
    <div class="logo"><img src="http://www.sitepoint.com/forums/images/banner_bg.gif" width="977" height="95" /> </div>
    <div id="smallmenucolumn">
    <div id="smallmenu">
    <ul>
        <li><a href="#">Contact Us</a>|</li>
        <li><a href="#">Delivery</a>|</li>
        <li><a href="#">International Orders</a>|</li>
        <li><a href="#">7-Day Returns</a>|</li>
        <li><a href="#">Feedback</a>|</li>
        <li><a href="#">Customer Service</a></li>
    </ul>
    </div>
    </div>
</div>
    </div>

Hope this can be solved fairly easily.

Thanks,

Matthew.

2

The problem is that you aren’t using a background image, the img tag doesn’t make a background image. You also don’t have the links within the div that has the background image.

Try this:


<div id="outer">
    <div id="header">
	    <div class="logo" style="background-image: url(http://www.sitepoint.com/forums/images/banner_bg.gif); width: 977px; height: 95px;">
		    <div id="smallmenucolumn">
		    <div id="smallmenu">
			    <ul>
			        <li><a href="#">Contact Us</a>|</li>
			        <li><a href="#">Delivery</a>|</li>
			        <li><a href="#">International Orders</a>|</li>
			        <li><a href="#">7-Day Returns</a>|</li>
			        <li><a href="#">Feedback</a>|</li>
			        <li><a href="#">Customer Service</a></li>
			    </ul>
		    </div>
		    </div>
		</div>
	</div>
</div>
3

What you suggested is working but there is a problem. I am using this code (I am using CSS to add the background image with classes logo and top - I will probably make these into just one later):

<div id="outer">
    <div id="header">
    <div class="logo"><div class="top">
    <div id="smallmenucolumn">
    <div id="smallmenu">
    <ul>
        <li><a href="#">Contact Us</a>|</li>
        <li><a href="#">Delivery</a>|</li>
        <li><a href="#">International Orders</a>|</li>
        <li><a href="#">7-Day Returns</a>|</li>
        <li><a href="#">Feedback</a>|</li>
        <li><a href="#">Customer Service</a></li>
    </ul>
    </div>
    </div>
    </div>
    </div>

The problem is the image is only viewable for the line of links that are over the top of the image. I need to see the complete image. Not just the part of the image that has text over it.

Hope you understand the problem. Any ideas?

Matt.

4

You’ll need to set a min-height on the element that has the background image equal to the height of the image.