help with div box with head and foot image?

[Nerdygeek]

I have a box with a header and footer and a background.

I use this to make the header and footer appear.

<div id="feature">
<img src="images/headback.jpg" />
<p>This is my web page</p>
<p>This is my web page</p>
<p>This is my web page</p>
<p>This is my web page</p>
<p>This is my web page</p>
<img src="images/headf.jpg" />
</div>

Then the CSS

#feature { background: url(../images/headbg.jpg) repeat-y; margin-top:30px;}


The problem with doing it this way is when I specify an exact height the background image from the CSS will go beyond the footer image of the div.

There's an easy way to do this?

Thanks

[Helleshtern]

It's background image of DIV so it will be always beyond IMG inside DIV.

If you want your background image starts under header image try to set position. For ex. if height of your header is 40px than do:


#feature { background: url(../images/headbg.jpg) repeat-y 0px 40px; margin-top:30px;}

[Nerdygeek]

It's background image of DIV so it will be always beyond IMG inside DIV.

If you want your background image starts under header image try to set position. For ex. if height of your header is 40px than do:


#feature { background: url(../images/headbg.jpg) repeat-y 0px 40px; margin-top:30px;}


Thanks very much but this still doesn't work. See attatched image:

[Helleshtern]

Now I understand where the problem is. You are trying to push footer image to bottom of DIV, right? You may try add this to style of footer image:

vertical-align: bottom

[Nerdygeek]

Now I understand where the problem is. You are trying to push footer image to bottom of DIV, right? You may try add this to style of footer image:

vertical-align: bottom

So I need to give the image at the bottom of the div an id?

Thanks