# 1. Add the background image to your assets folder (e.g., app/assets/images).
# Place the image file, for example, 'background.jpg' in the folder.
# 2. Open your CSS file (e.g., app/assets/stylesheets/application.css) and add the following code:
body {
background-image: url('background.jpg'); # Replace 'background.jpg' with your actual image file name
background-size: cover;
background-position: center;
}
# 3. Alternatively, if you are using SCSS (e.g., app/assets/stylesheets/application.scss):
body {
background-image: asset-url('background.jpg'); // Replace 'background.jpg' with your actual image file name
background-size: cover;
background-position: center;
}
# 4. Make sure that your layout file (e.g., app/views/layouts/application.html.erb) includes the stylesheet:
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>