使用img作为背景<h1>

Question

At the moment i'm working with CSS (really new to it) and i want to have a background img for headers - managed to make it work - however, strugling to make img width adjust to the length of the header (content)

h2{
 font-family: Arial, Helvetica, sans-serif; 
 font-size: 20px; 
 padding-left: 20px; 
 padding-top: 10px;
 margin-top:10px;
 color:white;
 }
span h2{
 background-image: url(border.gif);
 background-repeat: no-repeat;
 background-position: bottom left;
 background-size: 100% 100%;
 }

As you can see i've tried to inclose inside inline element such as , tried making as an inline element too, but can't make it work.

Any help would be much apriciated

Answer 1

Span is inline element and block headline shouldn't be inside.

If you want to set background to h2 , set it to h2 .

h2 {
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 20px; 
    padding-left: 20px; 
    padding-top: 10px;
    margin-top:10px;
    color:white;
    background: url('border.gif') left bottom / 100% 100% no-repeat;
}

In HTML there will be just h2 , no span around.