”現在”
topという空divを作り、そこにcssでパスをローカルにある画像ファイルを設定、repeatを横に行なっていました。

”やりたいこと”
空divではない方法で画像を設定する
パスをローカルではないファイルの指定方法で指定する
repeatを横にさせる
こちらの一番上の赤青を下の図のように
連続させたいです。

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="top">
14  </div>
15  <div class="container">
16    <div class="header clearfix">
17      <img src="./img/logo.jpg" >
18      <div class="header-list clearfix">
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        <div class="main-picture"><img src="./img/hero.jpg" ></div>
30        <img src="./img/shadow.jpg">
31        <h1 align=center>世界中を旅するフォトグラファーです。</h1>
32      </div>
33      <div class="main-bottom">
34        <div class="main-left">
35          <h4><span>|</span>最新の作品</h4>
36          <ul class="picture-list picture">
37              <li><img src="./img/thumb1.jpg" ></li>
38              <li><img src="./img/thumb2.jpg" ></li>
39              <li><img src="./img/thumb3.jpg" ></li>
40          </ul>
41          <ul class="picture-list2 picture">
42              <li><img src="./img/thumb4.jpg" ></li>
43              <li><img src="./img/thumb5.jpg" ></li>
44              <li><img src="./img/thumb6.jpg" ></li>
45            </ul>
46          </div>
47        <div class="main-right">
48          <h4><span>|</span>自己紹介</h4>
49          <p>
50            こんにちは、Manaです。世界中を
51            旅しながら写真を撮っています。
52            <a href="https://twitter.com/login?lang=ja">Twitter</a>や<a href="https://twitter.com/login?lang=ja">Facebook</a>
53            やってます。
54            お気軽にフォローしてください！
55            <a href="https://twitter.com/login?lang=ja">ブログ</a>もチェックしてみてくださ
56            い。これはデモサイトです。実際
57            は写真苦手です。はい。
58            こんにちは、Manaです。世界中を
59            旅しながら写真を撮っています。
60            <a href="https://twitter.com/login?lang=ja">Twitter</a>や<a href="https://twitter.com/login?lang=ja">Facebook</a>やってます。
61            お気軽にフォローしてください！
62            <a href="https://twitter.com/login?lang=ja">ブログ</a>もチェックしてみてくださ
63            い。これはデモサイトです。実際
64            は写真苦手です。はい。
65          </p>
66        </div>
67        </div>
68        </div>
69      </div>
70      <div align="center">
71        <img src="./img/スクリーンショット 2019-10-03 21.31.07.jpg ">
72      </div>
73    </div>
74  </div>
75</body>
76</html>

CSS
1.wrapper{
2  background-color: #EEE4CA;
3}
4
5.top {
6  height: 20px;
7  background-image:url();
8  background-repeat: repeat-x;
9  margin-bottom: 40px;
10}
11
12.container{
13  margin:0  auto;
14  width: 960px;
15}
16
17.header{
18  height: 100px;
19}
20
21.header-list{
22  float: right;
23  padding-top: 35px;
24}
25
26.header-list li{
27  float: left;
28  margin-right: 48px;
29  color: 	#5B616A;
30}
31
32.header-list li:last-child{
33  margin-right: none;
34}
35
36.main{
37  margin: 40px 0px;
38}
39
40.main-picture{
41  border: 5px white solid;;
42}
43
44.main-top h1{
45  color: 	#5B616A;
46  font-size: 25px;
47  width: 100%;
48  margin: 0 auto;
49}
50
51.main-bottom{
52  display: flex;
53  margin-top: 30px;
54}
55
56.main-left{
57  width: 650px;
58}
59
60.main-left h4{
61  color: 	#5B616A;
62  font-size: 20px;
63  margin-bottom: 15px;
64}
65
66span{
67  color: red;
68  font-weight: bold;
69}
70
71.picture {
72  display: flex;
73}
74
75.picture  li {
76  margin: 5px;
77  border: 5px white solid;;
78}
79
80.main-right{
81  color: 	#5B616A;
82  padding-left: 30px;
83  width: 240px;
84}
85
86.main-right h4{
87  font-size: 20px;
88  padding-bottom: 15px;
89}
90
91.clearfix::after {
92  content : " ";
93  display : block;
94  clear : both;
95}

kei344

2019/10/09 12:40

「ローカルではないファイルの指定方法」とは具体的にどのような物でしょうか。

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

回答1件

ベストアンサー

空divではない方法で画像を設定する

wrapperに背景を指定すればいいかと思います。

css
1.wrapper{
2  background-color: #EEE4CA;
3  background-image:url();
4  background-repeat: repeat-x;
5}

パスをローカルではないファイルの指定方法で指定する

普通にURLを書けばいいかと思います。

css
1  background-image:url(https://teratail-v2.storage.googleapis.com/uploads/contributed_images/5e793a87c262589aa85b6de8c810070f.jpeg);

repeatを横にさせる

今のままで横方向に繰り返し表示になっています。

css
1  background-repeat: repeat-x;

投稿2019/10/10 01:26

編集2019/10/10 01:28

Lhankor_Mhy

総合スコア36115

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.48%

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

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

質問する

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

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

条件ありの背景画像の表示方法を教えてください。

空divではない方法で画像を設定する

パスをローカルではないファイルの指定方法で指定する

repeatを横にさせる

関連した質問