Two line text background with shadow.

Question

This is what I am trying to achieve:

But I can’t make a background image as long as the text is saved while keeping the shadow with all the content ... I just get the following:

As you can see, this makes two shadows ... this is my markup and css:

<span class="interior_title">Samsung, HP Pop-Tops Do Double Duty <br>Rich Jaroslovsky</span> span.interior_title{ background: #c7c7c9; font-size: 50px; color: #2f2f31; width: 550px; font-family: 'chaletcomprime'; margin: 0 auto; text-transform: uppercase; line-height: 47px; padding: 0px 15px; margin-left: 90px; -moz-box-shadow: 0 0 7px #000; -webkit-box-shadow: 0 0 7px #000; box-shadow: 0 0 7px #000; } 

Any ideas on how to do this?

Answer 1

Example

This is close to what you want. I did it like that. Two elements floated to the left under the other. The same style differs only in width.

 <span class="one">Extra line here bal bal bal </span> <span class="two">Line TwoM<span> 

Now the problem was the extra shadow that was used in .two , I fixed it using

 .two:before{ background: tan; content: ""; height: 10px; left: 0; position: absolute; top: -10px; width: 100%; } 

Don’t worry about IE, because :before works in IE8, since for box-shadow it stops in IE9.