背景画像が設定できない

Question

Railsで開発をしています。
背景画像が設定できません。
背景の色は変えられるのですが背景画像が変えられません。
特にエラーは起きません。
よろしくお願いします。

app/views/players/index.html.erb

<div class="jumbotron special">
  <div class="container">
    <div class="row">
      <div class="col-xl-4 d-xl-block d-none">
        <div class="honoka"></div>
      </div>
      <div class="col-xl-8 outline text-xl-left text-center">
        <div class="display-3 copy">
          <span class="d-inline-block">lkmk</span><br>
          <span class="d-inline-block">kdms</span><span class="d-inline-block">の試合</span><br>
          <span class="d-inline-block">しま</span><span class="d-inline-block">lmfd;</span>
        </div>
        <p class="lead mt-2">Honoka は日本語も美しく表示できる Bootstrap テーマです</p>
        <hr>
        <ul class="download list-inline">
          <li class="list-inline-item"><a href="//github.com/windyakin/Honoka/releases" class="btn btn-honoka btn-lg last-release-download-link"><i class="fab fa-github-alt"></i> Download from GitHub</a></li>
          <li class="list-inline-item"><a href="/bootstrap-ja.html" class="btn btn-primary btn-lg"><i class="fa fa-play-circle"></i> Live Demo</a></li>
        </ul>
        <div class="basedon small">
          Last version v<span class="last-version"></span> ・ Based on <a href="http://getbootstrap.com/">Bootstrap</a> v<span class="base-version"></span>
        </div>
      </div>
    </div>
  </div>
</div>

vendor/assets/css/bootstrap.min.css

.jumbotron {
  padding: 2rem 1rem;
  margin-bottom: 2rem;
  background-color: #e9ecef;
  /* border-radius: .3rem */
  background-image: url(../../../public/images/baseball1.png);
}

画像のパス
public/images/baseball1.png

Answer 1

Railsであればpublicをよみこむのが前提になっているので

background-image: url("/images/baseball1.png");

の書き方だとおもわれますよ。

Comments

[kwtkwt]

回答ありがとうございます。

```
background-image: url("/images/baseball1.png");
```
の書き方に変更したところうまくいきました。
ありがとうございました。

Answer 2

.jumbotron {
/.../
background-color: #e9ecef;
background-image: url(../../../public/images/baseball1.png);
}

多分順番を逆にするとうまくいくと思います。原因は不明。

.jumbotron {
  /*...*/
  background-image: url(../../../public/images/baseball1.png);
  background-color: #e9ecef;
}

ですが、まとめてしまう方がわかりやすくていいような気がします。

.jumbotron {
  /*...*/
  background: #e9ecef url(../../../public/images/baseball1.png);
}

Comments

[kwtkwt]

回答ありがとうございます。
順番を帰る方法を試したのですがこちらはうまくいきませんでした。。