Using a background image for one page in rails 4 app?
Question
I am trying to give one of my views a background image. I have found info for rails three on how to do this, but it does not seem to work for me. Here is the link to the info I used: http://makandracards.com/makandra/2977-declare-different-css-background-images-for-different-locales
Here is my welcome.css.scss:
.container {
background-image: url(images/image.jpg)
}
here is welcome/home.html.erb:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<%= I18n.locale || 'en' %>"
lang="<%= I18n.locale || 'en'%>">
<body class="container">
</body>
</html>
4 answers
solution1
1 ACCPTED 2014-09-04 11:18:48
Firstly, you won't need to determine a class for the body tag - just call body in your CSS (and override for the specific page you want the background image on)
Secondly, you need to use asset_path helpers :
#app/assets/stylesheets/application.css.sass
body
background:
image: asset-url("image.jpg")
This is the "correct" way to call this, as if you use .erb or any other other methods with the asset pipeline , you run the risk of losing your functionality when you precompile the assets for production
The trick is to use the rails asset preprocessors to allow the use of dynamic paths for your assets. The paths will be used depending on whether you're using your assets dynamically, or statically ( in production )
Considering you have image.jpg in your /assets/images folder, the above code should work for you. The SCSS version would be:
#app/assets/stylesheets/application.css.scss
body
{
background: {
image: asset-url("image.jpg");
}
}
--
Update
You can call the welcome css like this:
#app/views/layouts/application.html.erb
...
<head>
<%= stylesheet_link_tag "welcome" if controller_name == "welcome" %>
</head>
solution2
0 2014-09-04 06:56:10
CSS File name
welcome.css.scss -> welcome.css.scss.erb
Content
background-image: url("<%=image_path('image.jpg')%>");
solution3
0 2016-06-02 16:44:13
I know this question was over a year ago, but none of the answers helped me so I figured out something more unorthodox in terms of managing the background image.
<% if action_name === "homepage" %>
<body class="body-change">
<% else %>
<body>
<% end %>
And then in the css.scss you could have something like:
.body-change {
background: red;
}
So I'm giving the body a certain class if a condition is met. So if I am on the homepage, the body's class will be something else and then I can add detail to that class in my CSS/SCSS. I hope this helps someone because it worked for me. You can also make the if statement more specific by also specifying a controller_name if you have multiple actions with the same name.
solution4
-1 2014-09-04 07:30:25
Please update your css file as
.container{
background-image: url("/assets/tooltip.png")
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.