1

Web サイトにフルサイズの背景を追加したいのですが、できれば CSS プロパティbackgroundとbackground-size. 現在、私は以下を使用しています

.bg {
  background: url("./gfxGeneral/backgroundImage.jpg");
  background-size: cover;
  background-repeat: no-repeat;
}

そして、それ<body class="bg">を適用します。問題は、ウィンドウが非常に狭くなった場合、私が使用している風景スタイルの背景画像は、幅の 100% にスケーリングされるため、小さな部分しかカバーしないことです。白い背景を残さないように、幅100%または高さ100%のいずれかを使用する方法はありますか? これに関するいくつかのガイドを見つけましたが、それらはすべてかなり「醜い」コードを含んでいます。

おまけのリクエスト: できれば IE9 などの古いブラウザをサポートするコードを使用してください

4

3 に答える 3

2

他の回答が提案していることは、body要素がウィンドウと同じくらい大きい場合にのみ機能します。

サイズがウィンドウ全体のサイズでない場合は、bodyJavaScript を使用してみてください (私は jQuery フレームワークを使用しています)。

<script>
$(document).ready(function() {
    // Call the function at the beginning, in case the window is already too small, 
    onResize();

    $(window).resize(function() {
        onResize();
    });

    function onResize() {
        // Note: 16 / 9 is the resolution of the background image
        // Change appropriately
        if ($(window).width() / $(window).height() < 16 / 9) {
            $(".bg").css("background-size", "auto " + $(window).height() + "px");
        }
        else {
            $(".bg").css("background-size", "cover");
        }
    }
});
</script>

このJFiddleを参照してください

お役に立てれば！

于 2014-10-30T17:10:04.347 に答える
0

JavaScript を使用する代わりに、CSS の「min-height」と「vh」単位を使用して、body 要素を少なくともビューポートと同じ高さにすることができます。

http://jsfiddle.net/s9ggm2u1/5/

body.bg {
    background[...]

    min-height: 100vh;
    margin:0px;
}

vh ユニットのブラウザー サポート: http://caniuse.com/#search=vh

于 2014-10-31T10:23:57.000 に答える