画像を横幅一杯に表示させる方法

画像を画面の横幅一杯に表示させたいのですが、
少し隙間があいてしまいます。
どうすれば解消されるでしょうか？
調べたのですが、解決できませんでした。
ご回答宜しくお願いします。
htmlと関わりありそうなcssの部分をのせます。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"> 
        <title>asobube</title>
       
        <link rel="stylesheet"  href="css/stylesheet.css">
        <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
    </head>
    <body>
        <div id="home" class="big-bg">
            <header>
                <div class="page-header wrapper">
                    <h1><a href="bare.html"><img class="logo" src="images/logo.png" alt="ダンスしてる人"></a></h1>
                    <nav>

                        <ul class="main-nav">
                            <li><a href="bare.html">ホーム</a></li>
                            <li><a href="#">講師プロフィール</a></li>
                            <li><a href="#">アクセス</a></li>
                            <li><a href="#">お問い合わせ</a></li>
                        </ul>

                    </nav>
                </div>
                <!--ナビゲーションバーの作成-->
                <div class="nav-header wrapper">

                    <ul class="sab-nav">
                        <li><a href="bare.html">ホーム</a></li>
                        <li><a href="#">講師プロフィール</a></li>
                        <li><a href="#">アクセス</a></li>
                        <li><a href="#">お問い合わせ</a></li>
                    </ul>

                </div>
                <!--背景画像の挿入-->
                <div class="image">
                    <h1><img class="background-image" src="images/image.jpg" alt="ダンスしてる人"></h1>
                </div>

            </header>
        </div><!--/#home-->    
    </body>
</html>

body {
  font-family:"Yu Gothic Medium", "遊ｺﾞｼｯｸ Medium" , "YuGothic" , "遊ｺﾞｼｯｸ体" , "ﾋﾗｷﾞﾉ角ゴ　Pro　M3",sans-serif;
  line-height:1.7;
  background-image: linear-gradient(#c9ffbf,#ffafbd);
}

html {
  font-size:100%;
}

a {
  text-decoration: none;
}
img {
  max-width:100%;
}

/*背景画像の設定*/

.background-image {
  width:100%;
  opacity:0.5;
}

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

回答1件

ベストアンサー

こちらを追加してみてください。

CSS
1body {
2  margin: 0;
3  padding: 0;
4}

bodyのmarginには初期値が指定されており、その影響ではないかと思われます。

参考URL:
https://qiita.com/kzak-plusbox/items/0240c7d070df82fd9001

投稿2020/05/30 13:56

編集2020/05/30 13:59

new1ro

総合スコア4528

takochi

2020/05/30 14:16

連日ご回答頂きありがとうございます。なぜmargin 0 になるのかの記事までアップして頂き勉強になりました！

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

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.35%

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

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

質問する

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

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

画像を横幅一杯に表示させる方法

関連した質問