画像をテキストの長さに合わせて作る

Question

私は自分の悩みのためにこれをやろうとしています。私は1600x400のような画像を持っています。私の警告の背景です。ニックネームの長さが変わると、しかし、私がやろうとしていると、画像を水平方向にカットしたテキストの長さがあなたのコードの詳細について多くを知らなくても something like this

Answer 1

を変更した場合、これは私が提供できるものです。

あなたは、CSSを設定しようとすることができますそのように：

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

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

あなたの質問にもっとよく答えてください。

Answer 2

イメージをbackground-repeat:no-repeat;に設定し、インラインテーブルまたはインラインブロックのいずれかに表示するように設定すると、内部コンテンツがラップされるように設定できます。

ここにサンプルコードを示します。

#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>

この情報がお役に立てば幸いです。