web-dev-qa-db-ja.com

Webページでフルスクリーン背景を作成する方法

このWebページを表示する画面サイズに関係なく、Webページの背景として画像を作成する方法は？適切に表示したい。どうやって？

htmlcssweb
11
Adham

JQueryプラグイン経由;）

4
doptrois

このCSSを非常に簡単に使用します（image.jpgを背景画像に置き換えます）

body{height:100%;
   width:100%;
   background-image:url(image.jpg);/*your background image*/  
   background-repeat:no-repeat;/*we want to have one single image not a repeated one*/  
   background-size:cover;/*this sets the image to fullscreen covering the whole screen*/  
   /*css hack for ie*/     
   filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.image.jpg',sizingMethod='scale');
   -ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.jpg',sizingMethod='scale')";
}
25
Shivam

なぜ、一番下のレイヤーに画像を設定するだけで、すべての迷惑な行為を忘れないのか

<img src='yourmom.png' style='position:fixed;top:0px;left:0px;width:100%;height:100%;z-index:-1;'>
19
str8

このCSSを使用して、Webページにフルスクリーンの背景を作成します。

body {
    margin:0;
    padding:0;
    background:url("https://static.vecteezy.com/system/resources/previews/000/106/719/original/vector-abstract-blue-wave-background.jpg") no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
2
Muneeb Siddiqui

キーワードのクイック検索 バックグラウンドジェネレーター は、これを表示しますCSS3生成動的に作成されたバックグラウンドパターン。

画像を小さくて再現性のあるものに保つことで、モバイルデバイスや小さなに読み込む際に問題が発生することはありません。 image file-sizeはメモリの問題を処理します。

headセクションのマークアップは次のとおりです。

<style type="text/css">

    body {
      background-image:url('path/to/your/image/background.png');
      width: 100%;
      height: 100%;
    }

</style>

アスペクト比を維持する必要があるものの画像を使用する場合、人やオブジェクトなど、あなた幅と高さに100％を必要としない代わりに、CSSを使用して背景画像を適用するさまざまな方法を示す、このクイックチュートリアルを確認してください。

0
arttronics

CSS

.bbg { 
    /* The image used */
    background-image: url('...');

    /* Full height */
    height: 100%; 

    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;    
}

HTML

<!doctype html>
<html class="h-100">
.
.
.
<body class="bbg">
</body>
.
.
.
</html>
0
Hayd

Divを幅100％、高さ100％にします。次に、背景画像を設定します。

0
dotty