背景画像Divの100％の高さを伸ばします

どのように多くのテキストがその内部に動的に配置されるかに基づいて高さが伸縮するコンテナがあります。コンテナには、コンテナの高さが変わると伸縮する必要がある背景イメージがあり、このイメージは決して切り取られません。私は.containerのスタイルをどのようにして背景画像をdivの100％のままにするのだろうと思っています。背景画像Divの100％の高さを伸ばします

私は次のことを試してみましたが、動作していないようでした：

.container { background: url('backgroundImage.jpg') 0 100% no-repeat; }

HTML構造のサンプル：

<div class="container"> 
    <p class="text">This is a short container</p> 
</div> 

<div class="container"> 
    <p class="text">This<br> is<br> a<br> tall<br> container</p> 
</div>

出典

2012-11-23 Jon

http://css-tricks.com/perfect-full-page-background-image/ –

background-sizeプロパティを設定する必要があります。 background-size: 100% 100%;は、水平方向と垂直方向の両方でコンテナを塗りつぶすようにスケールします。

通常、必要に応じてイメージを適切に拡大し、アスペクト比を維持するので、通常はbackground-size: cover;を使用します。かなり新しいプロパティであるので、supportのバックグラウンドサイズを確認してください。

出典

2012-11-23 19:40:36 Henrik

通知はcss3です。 –

CSS3はうまくいきました:)それはまさに私が必要としたことでした。 – Jon

愛css3そんなに。 – LazerSharks

あなたはbackground-size: cover;を試してみましたか？

あなたの例では、background-positionを調整しています。

出典

2012-11-23 19:40:05 gregory

css3にはbackground-size：coverという名前のプロパティがあります。背景サイズ：包含;あなたのニーズに合わせてbackground-size:cover;を使用するとよいでしょう。

** contain

は、その寸法の両方を確保しつつ、背景画像が可能と同じ大きさにスケーリングされなければならないことを指定未満または背景配置領域の対応する寸法に等しいです。

cover

その寸法の両方を確保しつつ、背景画像が可能限り小さくなるようにスケーリングされなければならないことを指定以上の背景の対応する寸法に等しいです位置決め領域。場合background-size: contain;に

出典

2012-11-23 19:46:21 defau1t

役に立たないですし、アスペクト比を失うことなく、完全な高さの背景画像を探しているなら、書かれたCSSの下

「への最初のパラメータを設定
background-size: auto 100%;

を使用自動 "は、画像の幅を現在の高さの比率で確実に保持します。 "100％"の2番目のパラメータは、背景画像がDIVと同じ高さに適応するのに役立ちます。

出典

2015-08-02 13:02:20

私はこれが正解でなければならないと思います。それは質問に答えると動作します（ブラウザのサポートは別として）。 –

私は個人的に 'background-size：cover'が正解であると信じています。私の答えは、@ henrikの答えがうまくいかない場合にのみ役立ちます。しかし、それはほとんどの場合に有効です。 –

背景画像Divの100％の高さを伸ばします

答えて

関連する問題