[Rails 6] How to set a background image in Rails [CSS]

I always forget it soberly & it took me a while to get to the correct information, so I'd like to keep it as a memorandum so that I don't forget it!

How to set a background image in Rails ①

Just place the image file under app / assets / images and write as follows.

custom.scss


.background {
  background-image: image-url('haikei_image.jpg');
}

I like this one because it's intuitive.

How to set a background image with Rails ②

In the same way, place the image file under app / assets / images and write as follows. The difference from ① is that the file name is custom.scss.erb and the extension is .erb.

erb:custom.scss.erb


.background {
  background-image: url("<%= asset_path('haikei_image.jpg') %>");
}

I used this at first because it worked well here, but soon I ended up looking for another method. In this case, of course, it will be recognized by the editor as an erb file, so the completion function will be lost when writing CSS. I thought it was quite annoying w If you have any countermeasures, I would appreciate it if you could comment!

[Extra edition] How it didn't work

Place images in public / images and


background-image: url('/images/haikei_image.jpg');

There seems to be a way to write, but this was not reflected well and it took a long time. I get a reload error on the console. ..

Thank you for reading to the end!

I output what I learned every day like this! We look forward to helping you even a little. If you have any suggestions or impressions, I would appreciate it if you could comment!

Recommended Posts

[Rails 6] How to set a background image in Rails [CSS]
How to insert a video in Rails
Steps to set a favicon in Rails
How to implement a like feature in Rails
How to easily create a pull-down in Rails
How to make a follow function in Rails
[Swift] How to set an image in the background without using UIImageView.
How to implement a like feature in Ajax in Rails
How to write a date comparison search in Rails
[Rails] How to load JavaScript in a specific view
[Rails] How to display an image in the view
[Rails] How to write in Japanese
How to introduce jQuery in Rails 6
How to set Lombok in Eclipse
How to install Swiper in Rails
How to display a graph in Ruby on Rails (LazyHighChart)
Apply CSS to a specific View in Ruby on Rails
How to set up a proxy with authentication in Feign
How to implement a circular profile image in Rails using CarrierWave and R Magick
How to implement search functionality in Rails
How to change app name in rails
How to use custom helpers in rails
How to use MySQL in Rails tutorial
[rails] How to configure routing in resources
How to rename a model with foreign key constraints in Rails
[rails] How to create a partial template
How to implement ranking functionality in Rails
How to implement image posting using rails
How to publish a library in jCenter
How to use credentials.yml.enc introduced in Rails 5.2
How to implement a slideshow using slick in Rails (one by one & multiple by one)
How to create a query using variables in GraphQL [Using Ruby on Rails]
[Rails] How to log in with a name by adding a devise name column
How to update user edits in Rails Devise without entering a password
[Rails] How to apply the CSS used in the main app with Administrate
Rails: How to write a rake task nicely
Convert to a tag to URL string in Rails
[Rails] How to write when making a subquery
[Rails] How to create a graph using lazy_high_charts
[Rails] How to use select boxes in Ransack
How to translate Rails into Japanese in general
How to prevent direct URL typing in Rails
How to run a djUnit task in Ant
How to add a classpath in Spring Boot
How to create a theme in Liferay 7 / DXP
How to separate .scss by controller in Rails
How to conditionally add html.erb class in Rails
[Rails] How to create a Twitter share button
[Ruby on Rails] How to install Bootstrap in Rails
[Rails] How to use PostgreSQL in Vagrant environment
How to check Rails commands in the terminal
How to automatically generate a constructor in Eclipse
How to write Rails
How to uninstall Rails
How to set an image in the drawable Left / Right of a button using an icon font (Iconics)
A memo to simply create a form using only HTML and CSS in Rails 6
How to implement image posting function using Active Storage in Ruby on Rails
How to make a unique combination of data in the rails intermediate table
How to make an image partially transparent in Processing
How to clear all data in a particular table
How to create a Java environment in just 3 seconds