CSSのbackground-image が反映されない

こんにちは。現在Rails tutorialを参考にwebアプリを作っています。
ログインページで背景画像を設定したいのですが、反映されず困っています。。。
背景色は反映されます。
また単純な画像の挿入はできるので、パスは間違ってないと思われます（念の為詳しく書いていますが・・・）

※ちなみに、当初Loginページだけに背景画像を指定するため、bodyにクラスを指定してscss側で背景を指定しようとしたのですが、importantなどを入れてもなぜか反映されなかったため、やむなくlogin.html.erbの<style>に記述しています。

どなたかご教授いただけると幸いです。

反映したいページ

ファイル構造

コード

html
1<% provide(:title, "Log in") %>
2<!DOCTYPE html>
3<html>
4  <head>
5  </head>
6  <style>
7  body{
8      background-image: url("assets/images/dino.jpg");
9    }
10  </style>
11<body class="login">
12<h1>Log in</h1>
13<p>
14  This is emojirecords
15  </p>
16  <%= link_to image_tag("dino.jpg", alt: "Rails logo"),
17              'http://rubyonrails.org/' %>
18</body>
19</html>
20

scss
1@import "bootstrap-sprockets";
2@import "bootstrap";
3@import url('https://fonts.googleapis.com/css?family=Montserrat');
4/* universal */
5
6body {
7  padding-top: 60px;
8}
9
10section {
11  overflow: auto;
12}
13
14textarea {
15  resize: vertical;
16}
17
18.center {
19  text-align: center;
20  h1 {
21    margin-bottom: 10px;
22  }
23}
24
25/* header */
26
27#logo {
28  float: left;
29  margin-right: 10px;
30  font-size: 1.7em;
31  font-family: 'Montserrat', sans-serif;
32  color: #fff;
33  text-transform: uppercase;
34  letter-spacing: -1px;
35  padding-top: 9px;
36  font-weight: bold;
37}
38$bgDefault      : #f08080;
39$bgHighlight    : #f08080;
40$colDefault     : #ecf0f1;
41$colHighlight   : #ecdbff;
42$dropDown       : false;
43.navbar {
44  background-color: $bgDefault;
45  border-color: $bgHighlight;
46  .navbar-brand {
47    color: $colDefault;
48    &:hover, &:focus {
49      color: $colHighlight; }}
50  .navbar-text {
51    color: $colDefault; }
52  .navbar-nav {
53    > li {
54      > a {
55        color: $colDefault;
56        &:hover,  &:focus {
57          color: $colHighlight; }}
58      @if $dropDown {
59        > .dropdown-menu {
60          background-color: $bgDefault;
61          > li {
62            > a {
63              color: $colDefault;
64              &:hover,  &:focus {
65                color: $colHighlight;
66                background-color: $bgHighlight; }}
67            &.divider {
68              background-color: $bgHighlight;}}}}}
69    @if $dropDown {
70      .open .dropdown-menu > .active {
71        > a, > a:hover, > a:focus {
72          color: $colHighlight;
73          background-color: $bgHighlight; }}}
74    > .active {
75      > a, > a:hover, > a:focus {
76        color: $colHighlight;
77        background-color: $bgHighlight; }}
78    > .open {
79      > a, > a:hover, > a:focus {
80        color: $colHighlight;
81        background-color: $bgHighlight; }}}
82  .navbar-toggle {
83    border-color: $bgHighlight;
84    &:hover, &:focus {
85      background-color: $bgHighlight; }
86    .icon-bar {
87      background-color: $colDefault; }}
88  .navbar-collapse,
89  .navbar-form {
90    border-color: $colDefault; }
91  .navbar-link {
92    color: $colDefault;
93    &:hover {
94      color: $colHighlight; }}}
95@media (max-width: 767px) {
96  .navbar-default .navbar-nav .open .dropdown-menu {
97    > li > a {
98      color: $colDefault;
99      &:hover, &:focus {
100        color: $colHighlight; }}
101    > .active {
102      > a, > a:hover, > a:focus {
103        color: $colHighlight;
104        background-color: $bgHighlight; }}}
105}
106#logo:hover {
107  color: #fff;
108  text-decoration: none;
109}
110
111/* typography */
112
113h1, h2, h3, h4, h5, h6 {
114  line-height: 1;
115}
116
117h1 {
118  font-size: 3em;
119  letter-spacing: -2px;
120  margin-bottom: 30px;
121  text-align: center;
122}
123
124h2 {
125  font-size: 1.2em;
126  letter-spacing: -1px;
127  margin-bottom: 30px;
128  text-align: center;
129  font-weight: normal;
130  color: #777;
131}
132
133p {
134  font-size: 1.1em;
135  line-height: 1.7em;
136}
137

追記

回答してくださった方への追記情報です。

imgタグのsrcパス

backgroundのパス

network確認画面

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

回答1件

ベストアンサー

assets/imgaes/dino.jpg
↓
assets/images/dino.jpg

投稿2019/04/18 14:36

wtokuno

総合スコア448

natecosan

2019/04/18 21:30

すみません、ミスでした！しかし修正しても変わらずでした。。。

wtokuno

2019/04/19 00:27

- ブラウザの開発コンソールのNetworkを確認して、画像の読み込みが行われているか確認してみてください。 - <%= link_to image_tag("dino.jpg", alt: "Rails logo"), 'http://rubyonrails.org/' %> で出力されている <img> タグの src 属性にはどんなパスが設定されているでしょうか？開発コンソールのElementsで確認してみてもらえますか。 - background-image: url(<%= image_path("dino.jpg") %>); としたらどうなるでしょうか。

natecosan

2019/04/19 12:11

確認した部分を、画像付きで記事更新しました！よろしくお願いいたします。

wtokuno

2019/04/19 12:41

background-image: url(<%= image_path("dino.jpg") %>); としてもダメだったという認識でよいですか？

natecosan

2019/04/19 12:51

すみません、その部分をelementsで見てしまいました。記述直したら表示されました！！！ありがとうございます！！

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