Machen Sie Bild relativ zur Textlänge

Question

Ich versuche, dies für meine Zucken zu tun, ich habe ein Bild 1600x400 oder so etwas, es ist Hintergrund meiner Warnung, wenn also die Länge von Nickname ändert sich die Hintergrundbreite relativ, aber was ich versuche, horizontal Schnitt Bild zu tun ist, wenn Textlänge ändert something like this

Answer 1

Ohne viel über die Details des Codes zu wissen, das ist, was ich bieten kann:

Sie können versuchen, die CSS zu setzen als solche:

#element{ 
    background-image: url('your/image/url.jpg'); 
    background-position:center; 
    background-size:cover; 
} 

JS Fiddle: https://jsfiddle.net/1k4aqz13/

Bitte antworten Sie mit mehr Details, damit wir Ihre Frage besser beantworten können.

Answer 2

Sie können dies erreichen, indem Sie background-image auf Bild setzen zusammen mit background-repeat:no-repeat; und am wichtigsten setzen Sie die Anzeige auf Inline-Tabelle oder Inline-Block, so dass das Element um seinen inneren Inhalt wickelt.

Hier ist ein Beispielcode.

#container{ 
 
    width: 100%; 
 
} 
 

 
.textContainer{ 
 
    background-image:url('http://placehold.it/350x100'); 
 
    height: 100px; 
 
    background-repeat:no-repeat; 
 
    display: inline-block; 
 
    line-height: 30px; 
 
    padding: 0 5px; 
 
    /*Uncomment below if you want the image to stretch only when text in div goes beyond the image width-wise.*/ 
 
    /*background-size:cover;*/ 
 

 
}

<div id="container"> 
 
    <div class="textContainer"> 
 
    This is some test text here. 
 
    </div> 
 
    <br><br> 
 
    <div class="textContainer"> 
 
    This is some test text here too to check. 
 
    </div> 
 
</div>

Hoffnung, das hilft.