0

私が見つけたこのウェブサイトと同様の効果を達成しようとしています:http ://www.august.com.au/

このWebサイトで、ctrl +/-をズームイン/ズームアウトしても、背景は変わりません。コンテンツのみがズームします。

Webサイトの背景画像を設定して、画面の解像度やズームオプションに関係なく、背景画像が常に画面全体に表示されるようにしたいと考えています。

width:100%を使用してページ全体に表示できることは理解していますが、これはページの読み込み時に適用され、読み込み後にユーザーがズームしても画像のサイズは変更されないことを理解しています。

どこから始めればいいのか、何か提案はありますか?ウェブで情報を検索してみましたが、あまり見つかりませんでした。

また、これはcssではなくJavaScriptのようなものを使用して達成されると思いますか?

4

2 に答える 2

2
This worked for me in chrome, firefox

.someImage {
    width: 7%;
    height: 0;
    padding-bottom: 7%;
    background-image: url('../img/myImage.png');
    background-repeat: no-repeat;
    position: fixed;
    bottom: 5%;
    left: 5%;
    background-size: 100% 100%;
}
于 2014-01-24T11:00:33.790 に答える
0

このための素晴らしいJqueryプラグインがあることがわかりました:

http://bavotasan.com/2011/full-sizebackground-image-jquery-plugin/

期待どおりに動作するようです。

于 2012-09-05T00:05:15.003 に答える