背景画像を画面いっぱいに表示させたい

・現状の問題
ウインドウサイズの際には、正しく全体を覆うように表示されますが、ウインドウ幅を狭めていくと、800px前後にて背景画像の幅もそれに伴って縮小されてしまい、右側面に余白が出てしまう状況です。
ヘッダーは画面幅を維持しつつ、レスポンシブ対応しております。
backgroundに対し、widthやsize等でも対応しましたが、解決にいたりませんでした。

・解決したいこと
ウインドウ幅を狭めても、ヘッダー同様に画面幅を維持しつつ表示させたいです。

コードを添付いたしますので、ご確認していただきご教示のほど宜しくお願い致します。

コード

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>デザインカンプの練習</title>
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css2?family=Bad+Script&display=swap&amp;subset=japanese" rel="stylesheet">
</head>
<body>

    <!--　ヘッダー PC版ここから -->
<div id="home" class="bg_img">
    <header id="page_top">
        <nav>
            <div class="container">
                <h1><a href="#page_top">MY Portfolio</a></h1>
                <div class="nav_flex">
                    <ul class="main_nav">
                        <li><a href="#profile">Profile<span>プロフィール</span></a>
                        </li>
                        <li><a href="#works">Works<span>実績紹介</span></a></li>
                        <li><a href="#sill">Skill<span>スキル</span></a></li>
                        <li class="last_child"><a href="#contact">Contact<span>お問い合わせ</span></a></li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>
        <div id="main_img">
            <div class="m_wrapper">
                <div class="love_job">
                    <p>I love this job from the bottom of my heart.</p>
                </div>
                <div class="like_job">
                    <p>私はこの仕事が大好きだ</p>
                </div>
                <button class="btn" type="submit"><a href="#contact">Contact</a></button>
            </div>
        </div>
</div>

コード
@charset "utf-8";

/* html5doctor.com Reset Stylesheet */

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

body {
    line-height:1;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
    display:block;
}

nav ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
    text-decoration: none;
}

/* change colours to suit your needs */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

/* change colours to suit your needs */
mark {
    background-color:#ff9;
    color:#000;
    font-style:italic;
    font-weight:bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}

/* change border colour to suit your needs */
hr {
    display:block;
    height:1px;
    border:0;
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
    vertical-align:middle;
}

/* リセットCSSここまで */

/* 共通css */

*{
    margin: 0;
    padding: 0;
    border: 0;
  }

a p {
    font-family: 'Bad Script', cursive;
}

ul li {
    list-style: none;
}

html {
    font-size: 100%;
}

.container a {
    text-decoration: none;
}

#profile,
#skill,footer {
    background-color: #ffffff;
}

#works,#contact {
    background-color: #F9F9F9;
}


/* PCデザイン */

/* header */
#page_top {
    background-color: #FFFFFF;
    opacity: 0.8;
    width: 100%;
    height: 80px;
    position: fixed;
    box-sizing: border-box;
    padding: 0 4%;
}



.container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.container h1 {
    line-height: 70px;
    font-family: 'Bad Script', cursive;
    font-size: 32px;
    font-weight: normal;
}

#page_top h1 a {
    color: #572B23;
    text-decoration: none;
}

.nav_flex {
    margin-top: 17px;
}

.nav_flex ul {
    display: flex;
}

.main_nav ul {
    display: table;
	margin: 0 auto;
	text-align: center;
}

.main_nav ul li {
	display: table-cell;
	vertical-align: middle;
    font-size: 14px;
}

.main_nav li a {
    display: block;
    font-family: 'Bad Script', cursive;
    margin-left: 50px;
    font-size: 24px;
    text-align: center;
    color: #572B23;
}

.last_child a{
    display: table-cell;
    vertical-align: middle;
    color: #315611 !important;
}

.main_nav span {
    display: block;
    font-size: 14px;
    padding: 15px 0 3px 0;
}

.main_nav a span::after {
    content: '';
	width: 0;
	transition: all 0.3s ease;
	border-bottom: 1px solid #572B23;
	display: block;
}

.main_nav a:hover span::after {
    width: 100%;
	border-bottom: 1px solid #572B23;
}


/* main_img */

#home {
    background: transparent url('/img/PCデザイン/top-image.png') 0% 0% no-repeat padding-box;
    min-height: 100vh;
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
}

#main_img {
    position: relative;
}

.love_job {
    min-width: 850px;
    height: 100px;
    background-color: #fff;
    position: absolute;
    top: 334px;
    left: 0;
    opacity: 0.8;
}

.love_job p {
    line-height: 100px;
    margin-left: 120px;
    font-size: 38px;
    font-family: 'Bad Script', cursive;
}

.like_job {
    position: absolute;
    top: 458px;
    left: 0;
    min-width: 533px;
    height: 60px;
    background-color: #fff;
    opacity: 0.8;
}

.like_job p {
    line-height: 60px;
    margin-left: 120px;
    font-size: 24px;
    font-family: 'Bad Script', cursive;
}

.btn {
    width: 200px;
    height: 56px;
    background-color: #fff;
    opacity: 0.8;
    font-size: 23px;
    font-family: 'Bad Script', cursive;
    position: absolute;
    top: 633px;
    left: 620px;
    cursor: pointer;
}

.btn a {
    text-decoration: none;
    color: #572B23;
}

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

回答3件

ベストアンサー

拝見した感じでは、以下の個所が原因かと思います。

css
1.love_job {
2   min-width: 850px; /* ここのwidthがはみ出してる */
3   // 省略
4}
5
6.like_job {
7   min-width: 533px; /* ここのwidthもはみ出してる */
8   // 省略
9}
10
11.btn {
12   left: 620px; /* これが余白部分を左から右に押し出してる */
13}

すでに回答されている修正に加えて、右から位置を合わせてみてはいかがでしょうか。

css
1.btn {
2  right: 100px; /* 位置はちょうど良いところに合わせてください */
3}

投稿2020/05/28 00:07

shin_you

総合スコア27

CodOsk

2020/05/28 10:47

この度は、ご教示いただきまして誠にありがとうございました。無事、ヘッダー同様に幅一杯に表示され、レスポンシブ対応も確認できました。並びに、他の方々もコメントをしていただきまして誠にありがとうございました。この場をお借りして、感謝の言葉を申し上げます。

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

原因は以下のようです。

CSS
1.love_job {
2    min-width: 850px; /* 横幅の下限が850pxなので、画面幅が850px以下になると画面の横スクロールが発生 */
3    // 後略

↓以下のように変更すると、画面幅800px付近での「右側の余白」はなくなると思います。

CSS
1.love_job {
2    /* min-width: 850px; */
3    max-width: 100vw;
4    width: 850px;
5    // 後略
6}

画面幅よりも大きな横幅の要素があると右側に隙間ができるので、
他の画面サイズでも同様に修正してください。

投稿2020/05/27 23:41

編集2020/05/27 23:43

new1ro

総合スコア4528

CodOsk

2020/05/28 10:47

この度は、ご教示いただきまして誠にありがとうございました。無事、ヘッダー同様に幅一杯に表示され、レスポンシブ対応も確認できました。

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

表示が変になるPXのところにブレークポイントを作ってはどうですか？

そこに新たにそのサイズ以下に当てはまるCSSを書き込んでください
https://techacademy.jp/magazine/9369

投稿2020/05/27 23:27

AMK

総合スコア765

CodOsk

2020/05/28 10:47

この度は、ご教示いただきまして誠にありがとうございました。無事、ヘッダー同様に幅一杯に表示され、レスポンシブ対応も確認できました。

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

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.35%

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

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

質問する

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

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

背景画像を画面いっぱいに表示させたい

関連した質問