背景画像をうまく操作できない

背景画像は縦横画面いっぱいにしたいが、どうしても手前にあるMATSUKAZEYAの画像の縦幅に合わせたサイズになります。どのようにすれば、背景画像を画面いっぱいに表示させ、手前の画像を真ん中に配置できるのでしょうか？

html
1<!DOCTYPE html>
2<html lang ="ja">
3  <head>
4    <meta charset="utf-8">
5    <title>松風屋</title>
6    <meta name="description" content="松風屋ホームページ">
7    <link rel="stylesheet" href="style.css">
8  </head>
9
10  <body>
11     <nav>
12        <h1><img src="images/logo.png" alt="松風屋のロゴです。"></h1>
13          <ul>
14            <li><a href="http://www.matukazeya.com/">トップページ</a></li>
15            <li><a href="http://www.matukazeya.com/">松風屋のこだわり</a></li>
16            <li><a href="http://www.matukazeya.com/">あんどーなつ</a></li>
17            <li><a href="http://www.matukazeya.com/">商品のご紹介</a></li>
18            <li><a href="http://www.matukazeya.com/">店舗情報</a></li>
19            <li><a href="http://www.matukazeya.com/">会社概要</a></li>
20            <li><a href="http://www.matukazeya.com/">ご注文・お問い合わせ</a></li>
21          </ul>
22       
23        </nav>
24
25   <header>
26     <div class="img">
27       <img src="images/logo (2).png" alt="松風屋のロゴです。" >
28     </div>
29     
30      <div class="main">
31          <div class="description">和菓子処松風屋のこだわり</div>
32        <div class="article">
33          <p>当社は、対象10年に創業した約100年の歴史を持つ和菓子屋です。<br>初代社長、佐々木市郎は俳聖松尾芭蕉を敬愛しており、「奥の細道　芭蕉最中」など<br>芭蕉にゆかりのある菓子を作り続けてきました。<br>松尾芭蕉が奥の細道の旅の間に見出した概念に「不易流行」というものがあります。<br>
34          これは、いつまでも変化しない本質的なものを忘れない中にも、<br>新しい変化を取り入れていくということです。<br>当社はこの言葉を経営理念とし、昔からの伝統を守りつつ、<br>時代に流れや新しい変化を取り入れ、常により良い菓子を探求し続けています。</p>
35        </div><br>
36          <img src="images/name.png" class="img.name">
37          <p class="contact">株式会社松風屋三代目　佐々木啓仁</p>
38          <input type="submit" value="詳しく見る" class="recommend">
39      </div>
40    </header>  
41
42    <div class="secondary">
43     <p class="description2"><span class="section1">和菓子職人が丹精込めて作った</span><br><span class="section2">昔懐かし</span><span class="section3">あんどーなつ</span></p>
44     <p>繊細な味覚を持つ和菓子職人が丹精込めて作ったら、上品な甘さの特別なあんどーなつができました。<br>こだわりの食材を職人の技で仕上げた松風屋のあんどーなつをぜひご賞味ください。</p>
45     <input type="submit" value="詳しく見る" class="recommend">
46    </div>
47
48    <div class="thirtiary">
49      <p class="description3">商品のご紹介</p>
50      <p class="related"> 素材の良さを活かしながら、熟練の技ひとつひとつ、まごころ込めて手作りしています。</p>
51      <div class="container">
52        <img src="images/ic_products1.jpg" class="item">
53        <img src="images/ic_products2.jpg" class="item">
54        <img src="images/ic_products3.jpg" class="item">
55        <img src="images/ic_products4.jpg" class="item">
56        <img src="images/ic_products5.jpg" class="item"
57        >
58      </div>
59    </div>
60
61    <div class="news">
62
63
64    </div>
65
66
67   
68  </body>
69</html>
70

CSS
1nav {
2  display: flex;
3}
4header {
5  margin:0 0 100px 0;
6}
7h1 {
8  margin: 10px 0 0 200px;
9}
10ul {
11  display: flex;
12  list-style-type: none;
13  margin: 1.1rem 0 0 2.6rem;
14  font-size:14px;
15  font-family: serif;
16}
17li {
18  margin: 0 1rem 0 0;
19}
20a {
21  text-decoration: none;
22  color: #000
23}
24
25.img {
26  text-align: center;
27  background-image: url(images/main-vsual-nontitle.png);
28  background-size: cover;
29}
30.main {
31  text-align: center;
32  font-family: serif;
33}
34.description {
35  font-size:28px;
36  margin:100px 0 40px 0 ;
37  letter-spacing: 10px;
38}
39.article {
40  font-size:18px;
41}
42p {
43  line-height: 2;
44  margin: 0;
45}
46.contact {
47  line-height:5;
48}
49.recommend {
50  width:150px;
51  height: 40px;
52  background-color: #fff
53}
54.secondary {
55  background-image: url(images/main-vsual-nontitle.png);
56  padding: 0 0 0 50%;
57  font-family: serif;
58  margin: 0 0 100px 0;
59}
60.section1 {
61  font-size:15px;
62}
63.section2 {
64  font-size:18px;
65}
66.section3 {
67  font-size:23px;
68}
69.thirtiary {
70  text-align: center;
71}
72.description3 {
73  font-size: 24px;
74  margin: 0 0 30px 0;
75}
76.related {
77  font-size:15px;
78  margin: 0 0 45px 0;
79}
80.container {
81  display: flex;
82}
83.item {
84  padding: 10px;
85}

kei344

2020/05/29 13:40

「HTMLで画像を指定したら、CSSで画像の見せ方を変えることができるのはわかる」とは具体的にどのような方法でしょうか。何を意図しているのかがわかりにくいので、「background-imageを定義したら、どこでその画像を飾り付けできる」も何がしたいのかがわかりません。

buchiyuu

2020/05/29 14:10

字足らずで、申し訳ございません。僕の中で、基本は「HTMLの情報はCSSで飾り付けする」というイメージを持ってます。ここまでは正しいでしょうか？そして、ここで伝えたかったことは、HTMLでは書かれておらず、CSSで急に現れた背景画像はどこで飾り付けができるのかということです。根本が間違っていたら、教えていただきたいです。

kei344

2020/05/29 14:23

「イメージ」などではなく、具体的に画像に対して何がしたいのかがわかりません。HTMLでできることを試した上で、それがbackground-imageで実現できるかを質問されることをお勧めします。

buchiyuu

2020/05/29 15:28

本文を修正しました。よろしくお願いします！

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

回答2件

自己解決

試行錯誤して、自己解決しました！

投稿2020/06/01 14:54

buchiyuu

総合スコア15

Lhankor_Mhy

2020/06/02 03:35

具体的な解決手段が書いていないので低評価します。 https://teratail.com/help#resolve-myself

buchiyuu

2020/06/02 06:18

始めたばかりで、知らなかったです。教えていただきありがとうございました！次回から気をつけます！

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

背景画像は縦横画面いっぱいにしたいが、どうしても手前にあるMATSUKAZEYAの画像の縦幅に合わせたサイズになります。

HTML
1<div class="img">
2    <img src="images/logo (2).png" alt="松風屋のロゴです。" >
3    <!-- ここに後続の文章をいれればよいです。 -->
4</div>

多分、文章とロゴの塊が立て横中央にしたいのだろうと思いますが、
HTML/CSS全体を提示されないと、これくらいの回答になります。

投稿2020/05/29 15:36

kei344

総合スコア69407

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.48%

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

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

質問する

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

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

背景画像をうまく操作できない

関連した質問