背景画像が横幅いっぱい広がらない

CSSで背景画像を指定しました。画像を横幅いっぱいに広げたいのですが、広がりません。
右側が余ってしまいます...
※模写コーディングを行っています。

html
1<!DOCTYPE html>
2<html>
3<head>
4    <meta charset="UTF-8">
5    <title>FLOWER　かわいいが届くお花便</title>
6    <link rel="stylesheet" href="style.css">
7</head>
8<body>
9    <header class="header">
10        <img src="images/icon1.png" class="logo" art="">
11        <p class="cute">かわいいが届くお花便</p>
12        <img src="images/btn1.png" class="btn" alt="">
13        <img src="images/btn2.png" class="btn" alt="">
14        <p class="small">* 北海道、沖縄、離島エリアは現在対象外です</p>
15    </header>
16    
17</body>
18</html>

CSS
1@charset "UTF-8";
2
3body {
4    box-sizing: border-box;
5    margin: 0;
6    width: 1002px;
7}
8.header {
9    background-image: url("images/back1.jpg");
10    background-position: center bottom;
11    background-size: cover;
12    background-repeat: no-repeat;
13    height: 760px;
14}

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

回答3件

ベストアンサー

bodyのwidthがなぜwidth:1002pxになっているのかが疑問なのですがそこが原因なのではないでしょうか。
おそらく多くの液晶はその値にならないと思いますので。そこを100vwにしたら治りませんか？

投稿2020/07/16 08:21

px1-altnoi

総合スコア36

ooaai

2020/07/19 10:37

画面いっぱいになりました！ありがとうございます

ooaai

2020/07/19 10:37

画面いっぱいになりました！ありがとうございます

px1-altnoi

2020/07/20 03:17

よかったです。うまく行ったみたいで。これからも頑張ってください。

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

.headerにwidth: 100%; を指定してみては如何でしょうか。

投稿2020/07/18 12:48

FrontEnd_Japan

総合スコア271

CSS
1body {
2    box-sizing: border-box;
3    margin: 0;
4 /* width: 1002px; */
5    max-width: 1002px;
6}

投稿2020/07/16 08:51

kei344

総合スコア69606

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.35%

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

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

質問する

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

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

背景画像が横幅いっぱい広がらない

関連した質問