backgrounf-repeatの仕方

header-topに設定している画像を端まで並べたいのですがうまく行きません。
こちらが正解の画像になります。
まだ作成とちゅうですが、この部分についてご回答よろしくお願いいたします。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<meta charset="UTF-8">
4<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
5<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
6<meta name="format-detection" content="telephone=no">
7<link rel="stylesheet" href="./css/reset.css">
8<link rel="stylesheet" href="./css/style.css">
9<title></title>
10<head></head>
11<body>
12  <div class="wrapper">
13    <div class="header">
14      <div class="header-top">
15        <img src="./img/bg.jpg" >
16      </div>
17        <img src="./img/logo.jpg" >
18      <div class="header-list">
19      <ul>
20        <li>ホーム</li>
21        <li>自己紹介</li>
22        <li>作品</li>
23        <li>お問い合わせ</li>
24      </ul>
25      </div>
26      </div>
27      <div class="main">
28        <div class="main-top">
29          <img src="./img/hero.jpg" >
30          <h1>世界中を旅するフォトグラファーです。</h1>
31        </div>
32        <div class="main-bottom">
33        <div class="main-left">
34          <h4>最新の作品</h4>
35          <img src="./img/thumb1.jpg" >
36          <img src="./img/thumb2.jpg" >
37          <img src="./img/thumb3.jpg" >
38          <img src="./img/thumb4.jpg" >
39          <img src="./img/thumb5.jpg" >
40          <img src="./img/thumb6.jpg" >
41        </div>
42        <div class="main-right">
43          <h4>自己紹介</h4>
44          <p>
45            こんにちは、Manaです。世界中を
46            旅しながら写真を撮っています。
47            TwitterやFacebookやってます。
48            お気軽にフォローしてください！
49            ブログもチェックしてみてくださ
50            い。これはデモサイトです。実際
51            は写真苦手です。はい。
52            こんにちは、Manaです。世界中を
53            旅しながら写真を撮っています。
54            TwitterやFacebookやってます。
55            お気軽にフォローしてください！
56            ブログもチェックしてみてくださ
57            い。これはデモサイトです。実際
58            は写真苦手です。はい。
59          </p>
60        </div>
61        </div>
62      </div>
63      <div class="footer">
64        <img src="./img/スクリーンショット 2019-10-03 21.31.07.jpg ">
65      </div>
66    </div>
67  </div>
68</body>
69</html>

CSS
1.wrapper{
2  background-color: #FFEFD5;
3  width: 1000px;
4}
5
6.header-top {
7    background-image:url(./img/bg.jpg );
8    background-repeat: repeat-x;
9}
10
11
12
13
14.clearfix::after {
15    content : " ";
16    display : block;
17    clear : both;
18}
19
20.header{
21  height: 100px;
22}
23
24img[src$="./img/logo.jpg"] {
25
26}
27
28.header-list{
29  float: right;
30}
31
32.header-list li{
33  float: left;
34  margin-right: 10px;
35  color: #AAAAAA;
36}
37
38li:first-child{
39  float: right;
40}
41
42.main-bottom{
43  display: flex;
44}
45
46.main-left{
47  width: 650px;
48}
49
50.main-right{
51  float: right;
52  width: 230px;
53}

kyoya0819

2019/10/06 04:20

backgrounf-repeat -> background-repeat

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

回答1件

ベストアンサー

header-top内の imgタグで画像を表示してますが、imgタグでは繰り返しはできません。
imgタグは背景用に使うものではないので削除してください。

あと、CSSのheader-topで適切な高さを設定すればいいでしょう。

css
1.header-top {
2    height: 20px;
3    background-image:url(./img/bg.jpg);
4    background-repeat: repeat-x;
5}

投稿2019/10/06 03:25

hatena19

総合スコア33715

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.48%

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

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

質問する

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

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

backgrounf-repeatの仕方

関連した質問