画像を背景にしてブラウザに１枚表示させたい

画像を背景にしてブラウザに１枚表示させたいです。
htmlに

{% load static%}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="{% static 'accounts/top.css' %}">
    <title>XOXO</title>
</head>
<body>
    <div class="heading">
        <h1>LOVE YOU</h1>
    </div>
</body>
</html>

と書き、
top.cssに

.div,
.heading{
    width: "auto";
    height: "auto";
    color: black;
    background-image: url('top.jpg');
 }

と書きました。そうすると、文字のぶんだけの幅で２枚の画像が背景として表示されました。
また、top.cssに

.div,
.heading{
    width: 100%;
    height: 100%;
    color: black;
    background-image: url('top.jpg');
 }

と書くと、ブラウザで４枚画像が背景として表示されました。
ブラウザに、ブラウザの大きさぶん１枚だけ画像を背景として表示させたいのですが、どうしたら良いでしょうか？どう直せば良いのでしょうか？

m.ts10806

2017/10/02 02:38

過去質問においてもベストアンサーだけつけて結局どのように解決されたか分からないものが多いので、解決した場合どのように解決したか書くようにしてもらえると助かります。

m.ts10806

2017/10/02 04:31

こちらお読みください。　https://teratail.com/help/question-tips#questionTips4-2

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

回答1件

ベストアンサー

画像を背景にしてブラウザに１枚表示させたいです。

background-repeat を参考

ブラウザの大きさぶん１枚だけ

background-size を参考

に色々やってみて調整してください。
repeatについては指定しない場合は初期値「repeat」なので幅の分だけ繰り返し表示されているだけです。
「何枚表示させる」という指定ではありません。

.divクラスはどこにも使用されていないので謎の指定となっていますね。
全体背景としたいならbodyに指定したほうが良いかなと思います。

投稿2017/10/02 02:30

編集2017/10/02 02:32

m.ts10806

総合スコア80850

退会済みユーザー

2017/10/02 03:00

.body{ width: 100%; height: 100%; color: black; background-size:auto auto; background-image: url('top.jpg'); }

退会済みユーザー

2017/10/02 03:02

とcssに書いたのですが、ブラウザの一部分しか覆わない画像の大きさになっています。何か指定の仕方が間違っていますか？

m.ts10806

2017/10/02 03:32

「色々やってみてください」と書いたのでもう少し色々やってみて欲しかったんですが・・・そもそも「.body」は「bodyという名前のクラス」という意味となるので　class="body"　と指定しないとCSSは当たりません。「.div」についても同様ですね。「タグ自体」に当てたいなら冒頭の「.」は不要です。このあたりはもう少しCSSの基礎から学ばれた方が良いでしょう。で、「.body」と書いても背景画像が出ているのはおそらく「.heading」が残っているからですよね？不要となる指定をいつまでも残しておいてはバグの元となります。それでもrepeatを何も指定していない状態では画面の幅の分だけ画像は表示されるでしょうね。 background-sizeもautoに指定してますが、autoは初期値なので画像が持つ本来の大きさで表示しますよ。

m.ts10806

2017/10/02 03:39 編集

あと、ブラウザは縦長にも横長にも使う人自身が好きなサイズにできます。そのことがあるので例えば画像の繰り返しを解除しても基本は横に追従するはずなので画像が横長・縦長・正方形の形によってどこかに空白ができたり全て表示されないような表示になるのは理解した上で対応してくださいね。基本は繰り返しても問題ないような画像にするかbackground-positionで上手いこと見せているものが殆どです。ヒントは沢山提示しているはずなので、そのヒントをキーワードに調べてやってみてください。

m.ts10806

2017/10/02 04:31

結局、どのように解決されたんでしょうか？追記修正以来で予めお願いしていたはずですが。。

退会済みユーザー

2017/10/02 05:03

background-size:contain; background-repeat:no-repeat; で解決しました

m.ts10806

2017/10/02 05:04

了解です。解決したようで良かったです。

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