文字の背景に画像を表示させたい。

前提・実現したいこと

前提？
HTMLとCSSでホームページを作っています。
（中身は社内業務の引継ぎで、一般公開はしません）

CSSで背景を表示させたいのですが、反映されません。

発生している問題・エラーメッセージ

CSSで画像を表示させたいのですが、反映されません。
画像はCSS2で設定している"image/back.jpg"です。

該当のソースコード

####HTML

HTML
1<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2<html lang="ja">
3<head>
4<meta http-equiv="Content-Style-Type" content="text/css">
5<meta http-equiv="Content-Script-Type" content="text/javascript">
6<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
7<meta name="Description" content="ie">
8<meta name="Keywords" content="ie">
9<title>Skyeトップページ</title>
10<link rel="stylesheet" href="base-n.css" type="text/css">
11<link rel="stylesheet" href="topnavi.css" type="text/css">
12<link rel="stylesheet" href="img.css" type="text/css">
13<link rel="stylesheet" href="print.css" type="text/css" media="print" />
14<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
15</head>
16<body>
17<div id="wrapper">
18<div id="header">
19<!-- 見出し -->
20<h1> </h1>
21<!-- タイトル -->
22<p class="logo">マニュアル</p>
23<!-- 概要 -->
24<p class="description">*** 発注方法まとめ ***</p>
25</div><!-- / header end -->
26<!-- ドロップメニュー -->
27<ul id="dropmenu">
28  <li><a href="main.html">Home</a>
29    <ul>
30      <li><a href="ready.html">準備</a></li>
31      <li><a href="regist.html">登録</a></li>
32    </ul>
33  </li>
34</ul>
35
36<div id="container">
37<div id="contents">
38<!-- コンテンツ ここから -->
39<span>
40<p>ここは作業手引きページである。</p>
41<p>実作業者に向けた説明をしてある。</p>
42       <div class="topNavi">
43            <div class="topNaviColumn">
44                <div class="topNaviCon">
45                    <p>1</p>
46                    <p><a href="flow-c.html">詳しくはこちら</a></p>
47                </div><!-- /.topNaviCon -->
48            </div><!-- /.topNaviColumn -->
49            <div class="topNaviColumn">
50                <div class="topNaviCon">
51                    <p>2<br>上記メニューへ</p>
52                </div><!-- /.topNaviCon -->
53            </div><!-- /.topNaviColumn -->
54            <div class="topNaviColumn">
55                <div class="topNaviCon">
56                    <p>3</p>
57                    <p><a href="map.html">サイトマップ</a></p>
58                </div><!-- /.topNaviCon -->
59            </div><!-- /.topNaviColumn -->
60        </div><!-- /.topNavi -->
61
62<!-- コンテンツ ここまで -->
63</span>
64</div><!-- / contents end -->
65</div><!-- / container end -->
66
67<div id="footer">
68
69<ul class="nl">
70<li class="first"><a href="#">ホーム</a></li>
71<li><a href="map.html">サイトマップ</a></li>
72
73</ul>
74
75<!-- コピーライト -->
76<p></p>
77<!--<p>Copyright &copy; *** 著作権表記 ***. All Rights Reserved.</p>-->
78<p id="cds">CSS Template <a href="http://www.css-designsample.com/">CSSデザインサンプル</a></p>
79</div><!-- / footer end -->
80</div><!-- / wrapper end -->
81</body>
82</html>
83
84```CSSは文字数超過によりアップできませんでした。

yoshinavi

2019/04/23 17:51

質問は編集出来ますので、各コードは、ヘルプ等を参考にして、コードブロックとして、提示されると良いかと思います。

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

回答2件

自己解決

色々やっていたら自己解決しました。
一応CSSを全て載せておきます。
CSS一つ目：base-n.css

CSS
1@charset "Shift_JIS";
2
3/* 一括で全ての要素の余白をゼロに指定 */
4* {
5  padding: 0;
6  margin: 0;
7}
8
9a:link {
10  color: #6633ff;
11  text-decoration: underline;
12}
13
14a:visited {
15  color: #6633ff;
16  text-decoration: underline;
17}
18
19a:hover {
20  color: #ff0000;
21  text-decoration: underline;
22}
23
24/* ---------------------------------------- フォントスタイル フォントサイズ */
25body {
26  font-size: 0.9em;
27  text-align: center;
28 background-color:#fff;
29  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
30  padding: 0;
31  margin: 0;
32}
33
34/* ---------------------------------------- レイアウトに関する指定 */
35
36#wrapper {
37  text-align: left;
38  margin: 1em auto 0;
39  width: 90%;
40  border: 1px solid #cccccc;
41}
42
43#header {
44  padding: 20px 20px 10px;
45  border-bottom: 1px solid #cccccc;
46}
47
48#globalnavi {
49  width: 100%;
50  position: relative;
51}
52#container {
53  float: right;
54  width: 100%;
55  margin-left: -200px;
56}
57#contents {
58  margin-left: 0px;
59  padding: 2em 30px 4em 19px;
60  border-left: 1px solid #cccccc;
61  border-right: 1px solid #cccccc;
62}
63
64
65#footer {
66  clear: both;
67  padding: 0.5em 0 1em;
68  border-top: 1px solid #cccccc;
69}
70
71/* ---------------------------------------- #header内の指定 */
72
73/* -- 見出しレベル1 -- */
74h1 {
75  text-align: right;
76  font-size: 1em;
77  font-weight: normal;
78}
79
80/* -- 企業名 ショップ名 サイト名 -- */
81.logo {
82  font-size: 1.8em;
83  margin-bottom: 0.5em;
84}
85
86.logo a {
87  text-decoration: none;
88  background-color: #ffffff;
89  color:  #6666cc ;
90}
91
92.logo a:hover {
93  text-decoration: none;
94  background-color: #ffffff;
95  color: #663399;
96}
97
98/* -- 概要 -- */
99.description { }
100
101/* ---------------------------------------- #dropmenuの指定 */
102#dropmenu{
103
104  list-style-type: none;
105  width: 100%;
106  height: 35px;
107  margin: 0px auto 2px;
108  padding: 0;
109  background: #9999ff;
110  border-bottom: 2px solid #6666cc;
111  border-radius: 3px 3px 0 0;
112}
113
114#dropmenu li{
115  position: relative;
116z-index: 10;
117  width: 10%;
118  float: left;
119  margin: 0;
120  padding: 0;
121  text-align: center;
122}
123
124#dropmenu li a{
125  display: block;
126  margin: 0;
127  padding: 15px 0 11px;
128  color: #fff;
129  font-size: 14px;
130  font-weight: bold;
131  line-height: 1;
132  text-decoration: none;
133}
134
135#dropmenu li:hover > a{
136  background:  #ededfc ;
137  color: #6666cc;
138}
139
140#dropmenu > li:hover > a{
141  border-radius: 3px 3px 0 0;
142}
143
144#dropmenu li ul{
145  list-style: none;
146  position: absolute;
147z-index: 8;
148  top: 100%;
149  left: 0;
150  margin: 0;
151  padding: 0;
152  border-radius: 0 0 3px 3px;
153}
154
155#dropmenu li ul li{
156  overflow: hidden;
157  width: 150%;
158  height: 0;
159  color: #fff;
160  -moz-transition: .2s;
161  -webkit-transition: .2s;
162  -o-transition: .2s;
163  -ms-transition: .2s;
164  transition: .2s;
165
166}
167
168#dropmenu li ul li a{
169  padding: 13px 15px;
170  background: #9999ff;
171  text-align: left;
172  font-size: 12px;
173  font-weight: normal;
174}
175
176#dropmenu li:hover ul li{
177  overflow: visible;
178  height: 38px;
179  border-top: 1px solid #6666ff;
180  border-bottom: 1px solid #6666ff;
181}
182
183#dropmenu li:hover ul li:first-child{
184  border-top: 0;
185
186}
187
188#dropmenu li:hover ul li:last-child{
189  border-bottom: 0;
190}
191
192#dropmenu li:hover ul li:last-child a{
193  border-radius: 0 0 3px 3px;
194}
195
196/* ---------------------------------------- #contents内の指定 */
197
198/* -- 見出し -- */
199/* -- h2 -- */
200div.ribbon_bf{
201width: 40px;
202height: 70px;
203background: #6666cc;
204margin-left: 5px;
205margin-bottom: 0px;
206margin-bottom: 0;
207}
208
209h2{
210width: 50%;
211height: 30px;
212padding: 10px;
213background: white;
214box-shadow:0 0 5px #fff, 0 0 5px #ccc, 0 0 1px #aaa;
215-webkit-box-shadow:0 0 5px #fff, 0 0 5px #ccc, 0 0 1px #aaa;
216-moz-box-shadow:0 0 5px #fff, 0 0 5px #ccc, 0 0 1px #aaa;/*-- 見出し影 -- */
217border-radius: 6px;color:black;/*-- 文字色 -- */
218font-size: 16pt;
219padding-left: 50px;
220margin-top: -50px;/*-- リボン上長さ -- */
221margin-bottom: 0px;
222}
223
224div.ribbon_md{
225width: 15px;
226height: 15px;
227background: #ffcc00;/*-- リボンのピン -- */
228border-radius: 45px;
229margin-top: -32px;
230margin-left: 18px;
231margin-bottom: 20px;
232}
233div.ribbon_af{
234width: 0px;
235height: 10px;
236border-left: 20px solid #6666cc;
237border-right: 20px solid #6666cc;
238border-bottom: 15px solid transparent;
239background: white; /*-- リボン下側の背景色 -- */
240margin-top: 20px;
241margin-left: 5px;
242margin-bottom: 30px;
243}
244/* -- ここまでh2専用 -- */
245
246
247h3 {
248  font-size: 1.2em;
249  margin-bottom: 1.5em;
250  width: 50%; /* 見出しエリアの幅 */
251  padding: 5px 0 5px 5px;
252  border-left: 7px solid  #6666cc;
253  border-bottom: 1px solid #c0c0c0;
254  background: #eaedf7;
255}
256
257h4 position: relative;
258  padding: 5px 5px 5px 42px;
259  background: #77c3df;
260  font-size: 20px;
261  color: white;
262  margin-left: -33px;
263  line-height: 1.3;
264  z-index:-1;
265}
266
267h4:before {
268  position: absolute;
269  content: '';
270  left: -2px;
271  top: -2px;
272  border: none;
273  border-left: solid 40px white;
274  border-bottom: solid 79px transparent;
275  z-index:-2
276}
277
278h5,h6 { margin-top: 2.5em; }
279
280/* -- 文字 -- */
281#contents p {
282  line-height: 1.6em;
283  margin-bottom: 0.5em;
284}
285
286/* -- パン屑リスト -- */
287#contents .topic-path {
288  line-height: 1em;
289  margin-bottom: 2em;
290}
291
292/* -- 以下 リスト関係 -- */
293#contents dl { margin: 1em 0; }
294
295#contents dt {
296  margin-bottom: 0.5em;
297  font-weight: bold;
298  border-bottom: 1px dotted #666666;
299}
300
301#contents dd { margin-bottom: 2em; }
302#contents ul { margin: 1em 0 1em 20px; }
303#contents ol { margin: 1em 0 1em 30px; }
304#contents li { margin-bottom: 0.5em; }
305
306/* --- clearfix --- */
307.clearFix:after {
308content: ".";
309display: block;
310height: 0;
311clear: both;
312visibility: hidden;
313}
314.clearFix {
315min-height: 1px;
316}
317
318/* -- 凡例 -- */
319.box {
320width: 60%;
321    position: relative;
322    margin: 2em 0;
323    padding: 25px 10px 7px;
324    border: solid 2px #ccccff;
325}
326.box .box-title {
327    position: absolute;
328    display: inline-block;
329    top: -2px;
330    left: -2px;
331    padding: 0 9px;
332    height: 25px;
333    line-height: 25px;
334    vertical-align: middle;
335    font-size: 17px;
336    background: #9999ff;
337    color: #ffffff;
338    font-weight: bold;
339}
340.box p {
341    margin: 0; 
342    padding: 0;
343}
344
345img {
346 border:0px solid #333; /*外枠の色*/
347 padding:5px; /*余白*/
348 background-color:#ffffff; /*余白部分の色 */ 
349}
350
351/* --- 罫線スタイル0 --- */
352hr.separator {
353height: 2px;
354border: none;
355border-top: 1px #949494  dotted; /* 境界線 */
356}
357
358
359/* --- 罫線スタイル1 --- */
360hr.separator1 {
361height: 2px;
362border: none;
363border-top: 2px #9999ff dotted; /* 境界線 */
364}
365/* --- 罫線スタイル2 --- */
366hr.separator2 {
367height: 2px;
368border: none;
369border-top: 2px #9999ff dashed; /* 境界線 */
370}
371
372/* ---------------------------------------- #footer内の指定 */
373#footer p { text-align: center; }
374
375/* 以下 CSSデザインサンプルクレジット部分 */
376#cds{ display: none; }
377
378/* --- ▼フッタ内の設定開始 --- */
379
380/* --- フッタ --- */
381#footer {
382padding: 15px 0 20px; /* フッタのパディング（上、左右、下） */
383background-color: #f9f9f9; /* フッタの背景色 */
384border-top: 1px #c0c0c0 solid; /* フッタの上境界線 */
385}
386
387/* --- フッタメニュー --- */
388#footer ul.nl {
389margin: 0 0 10px; /* フッタメニューのマージン（上、左右、下） */
390padding: 0;
391list-style-type: none;
392text-align: center;
393}
394/* --- メニュー項目 --- */
395#footer ul.nl li {
396padding: 0 4px 0 8px; /* 項目のパディング（上右下左） */
397background: url(../image/menu_line.gif) no-repeat left; /* 項目の背景（区切り線） */
398display: inline;
399}
400/* 最初の項目 */
401#footer ul.nl li.first {
402background-image: none; /* 区切り線なし */
403}
404/* ガイドメニュー */
405#footer ul.guide {
406margin: 0 0 15px; /* ガイドメニューのマージン（上書き） */
407}
408
409/* --- アドレス・コピーライト --- */
410#footer address {
411font-style: normal;
412text-align: center;
413line-height: 140%; /* 行の高さ */
414}
415/* --- ▲フッタ内の設定終了 --- */

CSS2つ目：topnavi.css

CSS
1@charset "Shift_JIS";
2/* リンク先振り分け用 */
3
4.topwrap {
5    overflow:hidden;
6    position:relative;
7  display: -webkit-box; /*Android4.3*/
8  display: -ms-flexbox; /*IE10*/
9  display: -webkit-flex; /*PC-Safari,iOS8.4*/
10  display: flex;
11z-index: 2;
12    margin-left:-20px;
13    margin-top:0px;
14    margin-bottom:20px;
15}
16
17* html .topwrap {
18    height:1em;
19    overflow:visible;
20}
21.topbox {
22    display:inline;
23    width:20%;
24    float:left;
25    margin-left:1%;
26}
27.top-box {
28    padding: 0.5em 1em;
29    margin: 2em 0;
30    background: #FFF;
31    border: solid 3px #9999ff;/*線*/
32    border-radius: 10px;/*角の丸み*/
33}
34.topbox h2 {
35    padding:10px 0;
36    color:#fff;
37    font-size:14px;
38    background:#61bca1;
39}
40.topbox p {
41    margin:10px;
42}

CSS三つ目：img.css

CSS
1@charset "Shift_JIS";
2#contents {
3background-image: url("image/back.jpg");
4background-repeat: no-repeat;
5background-position: 90% 0%;
6background-size:cover;
7}

投稿2019/04/27 06:04

kazumi_7

総合スコア21

yoshinavi

2019/04/27 12:51

＞CSSで画像を表示させたいのですが、反映されません。画像はCSS2で設定している"image/back.jpg"です。 →「CSS2」とありますが、回答は、３つめのCSS「img.css」とあります。今一つ、何が問題で、何で解決したのか理解できておりません。「image/back.jpgへのパスが違っていた」との事なのでしょうか？