web-dev-qa-db-ja.com

Webページの背景にGIFフルスクリーンを表示する方法は？

私はGIFを画面全体にフィットさせようとしていますが、これまでのところ、画面上にある小さな正方形が残りの部分は白になっています。しかし、私はそれがすべてのスペースを占有することを望みます。

何か案は？

htmlcssgif
9
user3264048

バックグラウンドの場合は、background-size: cover;

body{
    background-image: url('http://i.stack.imgur.com/kx8MT.gif');
    background-size: cover;
    
    
    
    height: 100vh;
    padding:0;
    margin:0;
}
17
Juan Castillo

IMGメソッド

画像をスタンドアロン要素にしたい場合は、次のCSSを使用します。

#selector {
    width:100%;
    height:100%;
}

このHTMLの場合：

<img src='folder/image.gif' id='selector'/>

フィドル

Imgタグはbodyタグ内にのみ存在する必要があることに注意してください。それが他の何かの中にある場合、他の要素のプロパティに基づいて画面全体を埋めることはできません。ページが画像よりも高い場合、この方法も機能しません。空白が残ります。これがバックグラウンドメソッドの出番です

背景画像法

ページの背景画像にする場合は、次のCSSを使用できます。

body {
    background-image:url('folder/image.gif');
    background-size:100%;
    background-repeat: repeat-y;
    background-attachment: fixed;
    height:100%;
    width:100%;
}

フィドル

または速記版：

body {
    background:url('folder/image.gif') repeat-y 100% 100% fixed;
    height:100%;
    width:100%;
}

フィドル

9
zsaat14

GIFファイルで背景を設定し、次の方法で本文を設定できます。

body{
background-image:url('http://www.example.com/yourfile.gif');
background-position: center;
background-size: cover;
}

背景画像のURLをGIFで変更します。 background-position: centerを使用すると、画像を中央に配置でき、background-size: coverを使用すると、すべての画面に収まるように画像を設定できます。また、画面の100％に画像を収めたいが、表示せずに画像の一部を残さない場合は、background-size: containを設定することもできます。

プロパティの詳細は次のとおりです。

http://www.w3schools.com/cssref/css3_pr_background-size.asp

それが役に立てば幸い ：）

1
davidlj95

CSSスタイルタグに次のように入力します。

body {
  background: url('yourgif.gif') no-repeat center center fixed;
  background-size: cover;
}
0
Michael

背景画像とCSS3として使用することに満足している場合は、background-size: cover;トリックを行う

0
AJC

これはあなたが探していることをするはずです。

CSS：

html, body {
    height: 100%;
    margin: 0;
}

.gif-container {
  background: url("image.gif") center;
  background-size: cover;

  height: 100%;
}

HTML：

<div class="gif-container"></div>
0
jonsuh