画面いっぱいに背景画像を表示したい

説明しにくいのですが、画面いっぱいというのは開いた時のウインドウサイズのことです。
イメージでいうとこちらのサイトのようなものを作ろうとしています。スクロールするとコンテンツが見えるような・・・（これは動画ですが・・・実装したいのは静止画。）
https://designmodo.com/demo/videobackground/

いろいろ試しているのですが、ウインドウの横幅を動かすと、画像の縦幅も狭くなってしまい、ウインドウの縦幅より狭くなってしまいます。

どなたかアドバイス頂けませんでしょうか。
よろしくお願いします。

行動規範の内容に同意します

回答2件

background-sizeプロパティを使ってみてはいかがでしょうか？

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>タイトル</title>
6    <style type="text/css">
7        html {
8            background: url(https://placehold.jp/3d4070/ffffff/500x500.png?text=image);
9            -webkit-background-size: 100% 100%;
10            -moz-background-size: 100% 100%;
11            -o-background-size: 100% 100%;
12            background-size: 100% 100%;
13        }
14
15        h1, h2, p {
16            color: #ffffff;
17        }
18
19        .big {
20            height: 5000px;
21        }
22    </style>
23</head>
24<body>
25<div>
26    <h1>テキスト</h1>
27    <p>テキストテキストテキストテキスト</p>
28</div>
29<div class="big">
30    <h2>テキスト</h2>
31    <p>テキストテキストテキストテキスト</p>
32
33</div>
34</body>
35</html>

追記

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>タイトル</title>
6    <style type="text/css">
7        * {
8            margin: 0;
9            padding: 0;
10        }
11
12        html,
13        body {
14            width: 100%;
15            height: 100%;
16        }
17
18        span {
19            font-size: 1.5em;
20            color: #fff;
21        }
22
23        .background {
24            position: fixed;
25            z-index: 0;
26            top: 0;
27            left: 0;
28            width: 100%;
29            height: 100%;
30        }
31
32        .content1 {
33            position: relative;
34            z-index: 2;
35            height: 100%;
36            color: #fff;
37            background-color: rgba(255, 255, 255, .3);
38        }
39
40        .content2 {
41            position: relative;
42            z-index: 3;
43            height: 500px;
44            background-color: #fff;
45        }
46
47        .image1 {
48            position: absolute;
49            z-index: 0;
50            top: 0;
51            left: 0;
52            width: 100%;
53            height: 100%;
54        }
55
56        .footer1 {
57            position: relative;
58            z-index: 3;
59            height: 500px;
60            background-color: rgba(255, 255, 255, .3);
61        }
62    </style>
63</head>
64<body>
65<div class="background">
66    <img class="image1" src="https://placehold.jp/3d4070/ffffff/500x500.png?text=image" alt="image">
67</div>
68<section class="content1">
69    <h1>テキスト</h1>
70</section>
71<section class="content2">
72    <h1>テキストテキスト</h1>
73</section>
74<footer class="footer1">
75    <span>テキストテキストテキスト</span>
76</footer>
77</body>
78</html>

投稿2017/06/29 11:48

編集2017/06/29 17:13

s8_chu

総合スコア14731

退会済みユーザー

2017/06/29 12:55

回答ありがとうございます。わけあってバックグラウンドは使えないのです。記載が漏れており、申し訳ありません。imgタグで考えています。

s8_chu

2017/06/29 17:13

追記したような方法はいかがでしょうか？

行動規範の内容に同意します

object-fit とか。Edgeも次のバージョンから対応するようです。

【【CSS3】親要素の大きさに依存して画像の表示方法を変える［object-fit］プロパティの使い方。 - ONZE】
http://on-ze.com/archives/2296

【Can I use... Support tables for HTML5, CSS3, etc】
http://caniuse.com/#feat=object-fit

代替案。

HTML
1<div><img src="https://placehold.jp/24/cc9999/993333/350x150.png" alt=""></div>
2<p>
3text text text text text text text text 
4</p>

CSS
1* {
2  margin: 0;
3  padding: 0;
4}
5div {
6  height: 100vh;
7  width: 100%;
8  position: relative;
9  overflow: hidden;
10}
11img {
12  position: absolute;
13  top: 50%;
14  left: 50%;
15  transform: translate(-50%,-50%);
16  min-height:100%;
17  min-width:100%;
18}
19```**動くサンプル：**[https://jsfiddle.net/8eoj8u2z/](https://jsfiddle.net/8eoj8u2z/)