cssにて背景画像がすべて表示されるようにしたいです。

前提・実現したいこと

Fn+f11で全画面表示にしなくても背景画像がすべて見える状況にしたいです。
※画像は全体表示で、固定できるようにお願いします。

発生している問題

全画面表示にしないと画像の下方が途切れてしまい、画像の全体が表示されません。

上下2つの画像を見てわかるように上の大画面表示のほうがwindowsのタスクバーに邪魔されてしまい、下方が途切れてしまいます。
全画面表示をしなくても大画面表示のままで画像が途切れずに、全体が表示される方法を教えて下さい。

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="en" dir="ltr">
3    <head>
4        <meta charset="utf-8">
5        <title>test</title>
6        <link rel="stylesheet" href="style.css">
7    </head>
8    <body>
9    </body>
10</html>

css
1body
2{
3    background: url("bg.png");
4    background-size: cover;
5}
6

補足情報（FW/ツールのバージョンなど）

画像はmicrosoft社の(https://kbdevstorage1.blob.core.windows.net/asset-blobs/19758_en_1)を使用
OS: Windows 10 Home
Browser: Google Chrome

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

回答1件

ベストアンサー

↓やりたいことは、以下のどちらかで実現できるでしょうか?

CSS
1body
2{
3    background: url("bg.png");
4    /* background-size: cover; */
5    background-size: contain;
6    background-repeat: no-repeat;
7}

CSS
1body
2{
3    background: url("bg.png");
4    background-size: cover;
5    background-position: center bottom;
6}

投稿2020/04/27 09:17

new1ro

総合スコア4528

Beginner1698451

2020/04/27 09:28

回答ありがとうございます。確かに全画面表示はされます。しかし、自分の記述漏れで、「画像を全体に表示して、固定」できるようにしたいです。分かりづらい文章を書いてしまい申し訳ありません。何卒よろしくおねがいします。

new1ro

2020/04/27 09:43

スクロールしても背景画像は追従しないということなら、 background-attachment: fixed;を指定してみてほしいです。

Beginner1698451

2020/04/27 09:55

background-attachment: fixed;を指定したら自分が望んでいる状態になりました。ご丁寧にありがとうございました。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！