2012-10-02 19 views
19

バックグラウンド画像を垂直に伸ばす方法を解明しようとしています。私は、次のように3枚の画像とCSS3を使用しています:バックグラウンド画像を垂直に伸ばす

background-image: url("left.png"), url("right.png"), url("center.png") 
background-repeat: no-repeat, no-repeat, repeat-x 
background-position: top left, top right, top 

今、私は、彼らはすべての方法下に延びる垂直にこれらのイメージを伸ばしたいです。これを行う方法はありますか?

+0

私はそうは思わない。 ''タグのサイズを変更(ストレッチ/スケッシュ)することはできますが、その解決策には、バックグラウンドに「」を置くことがあります。 – KRyan

+1

これは見て良い場所かもしれません: http://stackoverflow.com/questions/1150163/stretch-and-scale-a-css-image-in-the-background-with-css-only – MikeB

+1

また、あなたはあなたの 'url'のように引用符を付けるべきではないと確信しています。 – KRyan

答えて

27

試してみてください。

background-size: 100% 100%; 

最初100%は、幅と高さのための第二のためです。

background-size: auto 100%; 

これは、画像を垂直方向に合わせて、幅は何でもできるようになる:あなたのケースでは、私はここにパーティーに遅れてんだけど、これは私のために働いていたものです100%

+1

高さを100%に設定するにはどうすればよいですか?私がbackground-size:100%を実行すると、widthとheightの両方を100%に設定します。 – user1539137

+2

これはかなり便利でした。私の場合は、「background-size:960px 100%」と設定しました。所望の効果を得る。 –

34

に第2のセットを必要としますそれは(私はそれがデフォルトで繰り返すと思います)行う必要があります。次のように設定することもできます。

background-repeat: no-repeat; 

画像を水平方向に繰り返しないようにすることもできます。

+0

私も 'background-position:center; 'を設定する必要がありました。 – KIC

+0

遅れてもパーティには歓迎されました。 – McNab

+0

'background-size:cover;'は探検する価値があります –

関連する問題