お読みあそばせ

本とか映画の感想文

【Railsあるある】疑似要素の背景が表示されない

昨日の夜。

もう眠いから明日にしよ……。ということで、今朝格闘していた。

結論

疑似要素の背景画像で表示させたい場合(ボタンの矢印アイコンとか)はこれでよい。

background-image: url("sample.png");

あらまし

まず前提として、Railsで背景画像を表示したいとき以下のSCSS・CSSでは表示されない。

background-image: url("sample.png");

この解決方法はググるとすぐ出てくる。

background-image: image-url("sample.png");

こう!!
Railsの構築なんかイチからやることないからすぐ忘れるけど。
これで画像のパスは試行錯誤する(webpackerとか使ってると入れる場所がかわるから)。

でも疑似要素の背景画像で使っている場合、これだと表示されない。

.button-icon::before {
  position: absolute;
  display: inline-block;
  width: 1em;
  height: 1em;
  background: image-url("arrow.png") no-repeat;
  background-size: contain;
  content: "";
}

ややこしいけど、image-urlじゃなくて普通にurlでいいっぽい。ちなみにこのCSSは適当に書いたので、これでアイコンが表示されるかはわからん。

まとめ

矢印アイコンくらいならFontAwesomeとかでだしたい。