teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

1

追記

2019/12/07 09:28

投稿

syosinsya125
syosinsya125

スコア4

title CHANGED
File without changes
body CHANGED
@@ -17,4 +17,123 @@
17
17
 
18
18
  ### 補足情報(FW/ツールのバージョンなど)
19
19
 
20
- サーバーを借りたりなどはまだしていないのでサーバー上にアップロード等はしていません
20
+ サーバーを借りたりなどはまだしていないのでサーバー上にアップロード等はしていません
21
+ ### 前提・実現したいこと
22
+
23
+ freehtml5.coからテンプレートをダウンロードしてwebサイトを作っています。テンプレートにもともと入っている画像は正しく表示されているのですが、自分が表示したい画像をimagesに入れて表示しようとしても、画像が表示されません。拡張子はpng,jpgで、名前に空白や日本語なども使っていません。
24
+
25
+ ### 発生している問題・エラーメッセージ
26
+
27
+ ブラウザ上で画像が表示されません
28
+
29
+ ### 該当のソースコード
30
+
31
+ html
32
+ <li style="background-image: url("images/back1.jpg");" data-stellar-background-ratio="0.5"></li>
33
+
34
+ ### 試したこと
35
+
36
+
37
+
38
+ ### 補足情報(FW/ツールのバージョンなど)
39
+ 追記
40
+ ```ここに言語を入力html
41
+
42
+ コード<!DOCTYPE html>
43
+ <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
44
+ <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
45
+ <!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
46
+ <!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
47
+ <head>
48
+ <meta charset="utf-8">
49
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
50
+ <title>Foodee &mdash; 100% Free Fully Responsive HTML5 Template by FREEHTML5.co</title>
51
+ <meta name="viewport" content="width=device-width, initial-scale=1">
52
+ <meta name="description" content="Free HTML5 Template by FREEHTML5.CO" />
53
+ <meta name="keywords" content="free html5, free template, free bootstrap, html5, css3, mobile first, responsive" />
54
+ <meta name="author" content="FREEHTML5.CO" />
55
+
56
+ <!--
57
+ //////////////////////////////////////////////////////
58
+
59
+ FREE HTML5 TEMPLATE
60
+ DESIGNED & DEVELOPED by FREEHTML5.CO
61
+
62
+ Website: http://freehtml5.co/
63
+ Email: info@freehtml5.co
64
+ Twitter: http://twitter.com/fh5co
65
+ Facebook: https://www.facebook.com/fh5co
66
+
67
+ //////////////////////////////////////////////////////
68
+ -->
69
+
70
+ <!-- Facebook and Twitter integration -->
71
+ <meta property="og:title" content=""/>
72
+ <meta property="og:image" content=""/>
73
+ <meta property="og:url" content=""/>
74
+ <meta property="og:site_name" content=""/>
75
+ <meta property="og:description" content=""/>
76
+ <meta name="twitter:title" content="" />
77
+ <meta name="twitter:image" content="" />
78
+ <meta name="twitter:url" content="" />
79
+ <meta name="twitter:card" content="" />
80
+
81
+ <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
82
+ <link rel="shortcut icon" href="favicon.ico">
83
+
84
+ <link href='https://fonts.googleapis.com/css?family=Playfair+Display:400,700,400italic,700italic|Merriweather:300,400italic,300italic,400,700italic' rel='stylesheet' type='text/css'>
85
+
86
+ <!-- Animate.css -->
87
+ <link rel="stylesheet" href="css/animate.css">
88
+ <!-- Icomoon Icon Fonts-->
89
+ <link rel="stylesheet" href="css/icomoon.css">
90
+ <!-- Simple Line Icons -->
91
+ <link rel="stylesheet" href="css/simple-line-icons.css">
92
+ <!-- Datetimepicker -->
93
+ <link rel="stylesheet" href="css/bootstrap-datetimepicker.min.css">
94
+ <!-- Flexslider -->
95
+ <link rel="stylesheet" href="css/flexslider.css">
96
+ <!-- Bootstrap -->
97
+ <link rel="stylesheet" href="css/bootstrap.css">
98
+
99
+ <link rel="stylesheet" href="css/style.css">
100
+
101
+
102
+ <!-- Modernizr JS -->
103
+ <script src="js/modernizr-2.6.2.min.js"></script>
104
+ <!-- FOR IE9 below -->
105
+ <!--[if lt IE 9]>
106
+ <script src="js/respond.min.js"></script>
107
+ <![endif]-->
108
+
109
+ </head>
110
+ <body>
111
+
112
+ <div id="fh5co-container">
113
+ <div id="fh5co-home" class="js-fullheight" data-section="home">
114
+
115
+ <div class="flexslider">
116
+
117
+ <div class="fh5co-overlay"></div>
118
+ <div class="fh5co-text">
119
+ <div class="container">
120
+ <div class="row">
121
+ <h1 class="to-animate">foodee</h1>
122
+ <h2 class="to-animate">Lovely Designed <span>by</span> <a href="http://freehtml5.co/" target="_blank">freehtml5.co</a></h2>
123
+ </div>
124
+ </div>
125
+ </div>
126
+ <ul class="slides">
127
+ <li style="background-image: url(images/ramen_1.png);" data-stellar-background-ratio="0.5"></li>
128
+ <li style="background-image: url(images/ramen_2.png);" data-stellar-background-ratio="0.5"></li>
129
+ <li style="background-image: url(images/ramen_3.png);" data-stellar-background-ratio="0.5"></li>
130
+ </ul>
131
+
132
+ </div>
133
+
134
+ </div>
135
+
136
+
137
+ ```
138
+ 上記がテンプレートの一部なのですが、<li style="background-image: url(images/ramen_1.png);" data-stellar-background-ratio="0.5"></li>
139
+ のramen_1.png ramen_2.png ramen_3.png をデフォルトと変えて自分の入れたい画像にしています。ですが、デフォルトから変えたら画像が表示されなくなります。