13

How to make an image as background for web page, regardless of the screen size displaying this web page? I want to display it properly. How?

4

10 に答える 10

25

この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')";
}
于 2012-07-14T17:26:09.743 に答える
20

ええと、画像を最下層に設定して、すべての煩わしさを忘れないのはなぜですか

<img src='yourmom.png' style='position:fixed;top:0px;left:0px;width:100%;height:100%;z-index:-1;'>
于 2013-09-02T02:36:46.297 に答える
4

Via jQuery plugins ;)

于 2012-06-03T11:01:41.870 に答える
3

この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;
}
于 2017-01-28T07:07:35.260 に答える
1

CSSで次のコードを使用します

html { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
これが私が見つけたリンクです：

于 2015-10-30T23:18:31.500 に答える
0

Make a div 100% wide and 100% high. Then set a background image.

于 2012-06-03T11:00:57.480 に答える
0

キーワードbackgroundgeneratorをすばやく検索すると、動的に作成されたこのCSS3で生成された背景パターンが表示されます。

画像を小さく再現性のあるものに保つことで、モバイルデバイスへの画像の読み込みに問題が発生することはなく、画像のファイルサイズが小さいためメモリの問題が解決されます。

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

<style type="text/css">

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

</style>

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

于 2012-06-03T11:24:09.027 に答える
0

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>
于 2018-02-19T00:17:49.510 に答える
0

私はこのチュートリアルに従いました：https ：//css-tricks.com/perfect-full-page-background-image/

具体的には、最初のデモは私を大いに助けてくれたものでした！

CSS
 {
    background: url(images/bg.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover; 
}

これは役立つかもしれません！

于 2019-10-31T04:05:34.953 に答える
0

「body」内の「div」要素に画像を配置すると、背景画像の白い境界線が常に存在する理由がわかりました。しかし、「体」の背景画像として入れれば、画像は全画面表示になります。

'body'のデフォルトの'margin'はゼロではないためです。このcssを追加すると、「div」に入れても背景画像を全画面表示にすることができます。

body {
    margin: 0px;
}
于 2020-02-07T11:21:11.137 に答える