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

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

ただいまの
回答率

90.01%

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 83

chair

score -3

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

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

コード
<!DOCTYPE html>
 <head>
  <meta charset="utf-8">
  <title>ISARA</title>
  <link rel="canonical" href="URL">
<link rel="stylesheet" href="kkk.css">
</head>
 <body>
  <header>
    <a><img class="header-logo" src = "ISARA.img/isaralogo.png" alt = "header-logo" title = "header-logo"></a>  
    <p class="heading">バンコクのノマドエンジニア育成講座</p>
    <a class="inquiry">お問い合わせ/資料請求はこちら</a>
  </header>
  <main>
    <p><img class="main-img" src="ISARA.img/main.jpg"></p>
  </main>
</body>
body {
 width: 1263px;
 font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
 margin: 0;
}
header{
 height: 75px;
 padding-top: 14px;
}
.heading{
 position: absolute;
 top: 25px;
 bottom: 57px;
 left: 180px;
 font-size: 14px;
 line-height: 16px;
}
.header-logo{
 position: absolute;
 top:14px;
 bottom:58px;
 left: 46px;
 width: 128px;
 height: 44px;
}
.inquiry{
 text-align: center;
 background-color: #C0687C;
 padding:11px 0px;
 color:#E8E7EF;
 border-radius: 20px;
 position:absolute;
 top: 16px;
 left: 899px;
 width: 317px;
}
.main-img{
 background-image:url("ISARA.img/main.jpg");
 background-size: cover;
}
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2019/11/09 20:54

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

    キャンセル

  • chair

    2019/11/09 22:06

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

    キャンセル

回答 1

checkベストアンサー

+2

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

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

<p><img class="main-img" src="ISARA.img/main.jpg"></p>
.main-img{
 background-image:url("ISARA.img/main.jpg");
 background-size: cover;
}


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

修正の案

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

<p class="main-img-bg"><img class="main-img" src="ISARA.img/main.jpg"></p>
.main-img-bg{
 background-image:url("ISARA.img/main.jpg");
 background-size: cover;
}

イメージ説明

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/11/10 08:09 編集

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

    キャンセル

  • 2019/11/10 09:17 編集

    もともとimg要素のbackgroundに画像を設定している理由が理解できていないのですが、
    img要素のsrcとbackground-imageの両方に同じを設定しても、
    表示上srcのほうに入っているファイルのほうが見えるため、background-sizeを操作しても何も変わりません。

    p要素にbackground-size:cover;を書いても
    p要素に指定したbackground-imageの画像が広がらない理由は不明なのですが、
    (質問に記載されたコードを変更したところ、こちらでは反映されました)

    参考までに、回答に修正後の状態のイメージを設置しました。

    キャンセル

  • 2019/11/10 11:51

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

    キャンセル

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

  • ただいまの回答率 90.01%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる