Question

How can I make the background of .post_headline_signup the same height as the background of the paragraph inside the div.

Here is my code:

<div class="post_headline">
    <p>Hello world<span class="post_headline_signup"><a href="site">text inside span</a></span></p> 
</div>

This is my css:

.post_headline {
background:url(images/signup_bg.jpg) repeat-x;
border-left:1px solid #555;
border-right:1px solid #555;
padding-left:1em;
height:2em;
line-height:2em
}
.post_headline p {
text-transform:uppercase
}
.post_headline a { 
font-weight:bold;
background:url(images/signup.jpg) repeat-x #900;
border-left:1px solid #000;
border-right:1px solid #000;
padding:1.2em; - **THE PROBLEM IS HERE - ONLY PADDING WORKS, LINE HEIGHT OR DIV HEIGHT DOESN'T**
margin-left:1em
} 
.post_headline a:hover { 
color:#FFF; 
text-decoration:underline 
} 

Ty!

Answer 1

background images cannot (in css2) stretch to fit their container. if you need it to stretch then you will have to have it as an <img/> (which is not great either (presentation vs content) however that is a limitation of css2. Css3 may offer background stretching but I dont think I have seen it)