背景画像だけ画面いっぱいにしたい。

bodyに対してwidthを８０％で設しました。背景画像の横幅のみを画面いっぱいに表示したいです。

写真のように設定したいと考えております。

html
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="utf-8">
5    <title>MyFreeWebsite</title>
6    <link rel="stylesheet" href="css/styles.css">
7  </head>
8
9  <body>
10    <div class="container">
11      <header>
12        <h1>30DAYSトライアル</h1>
13          <ul>
14            <li>デイトラとは</li>
15            <li>コース一覧</li>
16            <li>お問い合わせ</li>
17          </ul>
18      </header>
19      <div class="main">
20        <div>1日1題30日でプロのエンジニアになろう</div>
21        <div>毎日設定された課題をこなすだけ！未経験から30日でプログラミングスキルが身につきます。</div>
22      </div>
23  
24      <div class="second">
25        <h2>デイトラとは</h2>
26        <div class="about">
27          <div><img src="images/about.png"></div>
28          <div>デイトラとは、無料で・迷わず・楽しく学べるプログラミング学習アプリです。毎日設定された課題をこなしていくだけで、未経験から30日でプログラミングスキルが身につきます。1日1題30日でプロのWebエンジニアを目指しましょう。
29          </div>
30        </div>
31      </div> <!--.conteiner-->
32      
33  
34      <div>
35        <h2>コース一覧</h2>
36        <ul>
37          <li src="../images/web_first.png">HTML/ CSS/ Bootstrop</li>
38          <li src="../images/web_second.png">HTML/ CSS /Javascript /jQuery</li>
39          <li src="../images/web_third.png">PHP/ WordPress</li>
40        </ul>
41      </div>
42  
43      <div>
44        <h2>お問い合わせ</h2>
45        <div>さあ今日から30日間を始めよう</div>
46        <input type="text" placeholder="メールアドレス">
47        <button>無料で始める</button>
48      </div>
49    </div>
50
51    <script src="js/main.js"></script>
52  </body>
53</html>

CSS
1.container {
2  font-size: 16px;
3  margin: 0;
4  width: 80%;
5  margin: 0 auto;
6}
7
8header {
9  display: flex;
10  margin-bottom: 15px;
11}
12
13h1 {
14  font-size: 12px;
15}
16
17
18header ul { 
19  flex: 1 1 0%;
20  display: flex;
21  justify-content: flex-end;
22  margin: 0px;
23  font-size: 12px;
24  margin-top: 7px;
25  /* background-color: #f00; */
26}
27
28
29header ul li {
30  list-style: none;
31  margin-left: 10px;
32}
33
34.main {
35  background-image: url(../images/main-vsual-nontitle.png);
36  background-size: cover; 
37}
38
39
40

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

回答3件

ベストアンサー

ネガティブマージンで画面一杯に広げて、パディングで中身を狭めればどうでしょうか。

css
1.main {
2  background-image: url(../images/main-vsual-nontitle.png);
3  background-size: cover; 
4  margin-left: -12.5%;
5  margin-right: -12.5%;
6  padding-left: 12.5%;
7  padding-right: 12.5%;
8}

12.5% は 10% ÷ 0.8 の計算結果です。

投稿2020/06/18 10:21

総合スコア34075

2020/06/18 15:01

ありがとうございます！実際に実践してみて、paddingがなくても実行できたのですが、パディングで中身を狭める理由を教えていただきたいです。

hatena19

2020/06/18 19:25

paddingがないと中身（提示のHTMLなら「1日1題30日でプロのエンジニアになろう」などのテキスト）も画面一杯に広がってしまいます。センタリングしていれば見た目は差が出ない場合もありますが。

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

before疑似要素を使うのはどうですか。
サンプル

css
1.main {
2  position: relative;
3}
4.main::before {
5  content: "";
6  width: 125%;
7  position: absolute;
8  background-image: url(http://placehold.jp/150x150.png?text=);
9  background-size: cover;
10  top: 0;
11  bottom: 0;
12  left: -12.5%;
13  z-index: -1;
14}

参考：
::before (:before) - CSS: カスケーディングスタイルシート | MDN

投稿2020/06/18 10:15

Lhankor_Mhy

総合スコア36960

buchiyuu

2020/06/18 14:58

ありがとうございます！2つ質問があります。 position: relative; position: absoluteが必要な理由。また、top: 0; とbottom: 0; が必要な理由を脚えていただきたいです。

Lhankor_Mhy

2020/06/19 02:32

position: absolute は、背景のみの疑似要素を、通常の配置から外して絶対配置にするために必要です。 position: relative は、絶対配置にした背景のみの疑似要素を、.main の子要素にするために必要です。 top: 0; とbottom: 0; は、絶対配置にした背景のみの疑似要素の高さを、.main と同じ高さにするために必要です。

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

画面いっぱいにしたい<div class="main">が<div class="container">の中に入っています。
containerのwidthが80%になっているので、<div class="main">を<div class="container">の外に出さないと
100%にはならないと思います。

投稿2020/06/18 10:04