背景画像の横幅を画面いっぱいにしたいです。

どうしても右側に空白ができてしまいます。
box-sizing:　border-box;
margin
padding　
の変更など各要素に試したのですが改善しません。

↑widthを1263pxに指定したら一応できました。ですが、なぜ空白ができたか、知りたいです。

HTML
1コード
2<!DOCTYPE html>
3 <head>
4  <meta charset="utf-8">
5  <title>ISARA</title>
6  <link rel="canonical" href="URL">
7<link rel="stylesheet" href="kkk.css">
8</head>
9 <body>
10  <header>
11    <a><img class="header-logo" src = "ISARA.img/isaralogo.png" alt = "header-logo" title = "header-logo"></a>　　
12    <p class="heading">バンコクのノマドエンジニア育成講座</p>
13    <a class="inquiry">お問い合わせ/資料請求はこちら</a>
14  </header>
15  <main>
16    <p><img class="main-img" src="ISARA.img/main.jpg"></p>
17  </main>
18</body>

CSS
1body {
2 width: 1263px;
3 font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
4 margin: 0;
5}
6header{
7 height: 75px;
8 padding-top: 14px;
9}
10.heading{
11 position: absolute;
12 top: 25px;
13 bottom: 57px;
14 left: 180px;
15 font-size: 14px;
16 line-height: 16px;
17}
18.header-logo{
19 position: absolute;
20 top:14px;
21 bottom:58px;
22 left: 46px;
23 width: 128px;
24 height: 44px;
25}
26.inquiry{
27 text-align: center;
28 background-color: #C0687C;
29 padding:11px 0px;
30 color:#E8E7EF;
31 border-radius: 20px;
32 position:absolute;
33 top: 16px;
34 left: 899px;
35 width: 317px;
36}
37.main-img{
38 background-image:url("ISARA.img/main.jpg");
39 background-size: cover;
40}

kei344

2019/11/09 11:54

「なぜか2つ目のコードに･･･」は「</body>```」の「```」の前で改行しましょう。

chair

2019/11/09 13:06

できました。ありがとうございます！

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

回答1件

ベストアンサー

現在の状態から考えられること

問題の箇所は下記.main-imgの部分かと思います。
このコードではmain.jpgの背景にmain.jpgを配置しているようです。

HTML
1<p><img class="main-img" src="ISARA.img/main.jpg"></p>

CSS
1.main-img{
2 background-image:url("ISARA.img/main.jpg");
3 background-size: cover;
4}

.main-imgの横幅＝main.jpgの横幅であり、
background-size:cover;にしても画面いっぱいには広がりません。
（imgタグにwidth:100%を付ければ、画像自体を画面いっぱいに広げることは出来ます）

修正の案

画像を囲んでいるpタグのほうに、background-image＆background-sizeを適用してみてはいかがでしょうか？
pタグの横幅は画面いっぱいに広がると思いますので、背景も画面いっぱいに広がると思います。

HTML
1<p class="main-img-bg"><img class="main-img" src="ISARA.img/main.jpg"></p>

CSS
1.main-img-bg{
2 background-image:url("ISARA.img/main.jpg");
3 background-size: cover;
4}

投稿2019/11/09 22:02

編集2019/11/10 00:12

AsukaKobayashi

総合スコア296

chair

2019/11/09 23:18 編集

width:100%;で出来ました。しかしbackground-size:cover;をp要素、img要素に書いてもまったく反応しません。使い方が知りたいです。

AsukaKobayashi

2019/11/10 00:17 編集

もともとimg要素のbackgroundに画像を設定している理由が理解できていないのですが、 img要素のsrcとbackground-imageの両方に同じを設定しても、表示上srcのほうに入っているファイルのほうが見えるため、background-sizeを操作しても何も変わりません。 p要素にbackground-size:cover;を書いても p要素に指定したbackground-imageの画像が広がらない理由は不明なのですが、（質問に記載されたコードを変更したところ、こちらでは反映されました）参考までに、回答に修正後の状態のイメージを設置しました。

chair

2019/11/10 02:51

理解できました！ background-size:cover;が効かなかったのは、p要素とimg要素の両方にbackground-imageを書いていたからでした。ありがとうございました！

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