How to make my background image appear only on one page in rails 4?
Question
I have a background image that I can not get to stay just on one page. I have made a welcome controller with one home view to display it. I am precompiling my assets as well. The background shows up just fine, but my goal is to just show the background image on my home.html.erb view.
welcome/home.html.erb:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<%= I18n.locale || 'en' %>"
lang="<%= I18n.locale || 'en'%>">
<body class="container">
<h1>title</h1>
</body>
</html>
welcome controller:
class WelcomeController < ApplicationController
def home
end
end
stylesheets/welcome.css.scss:
body
{
background: {
image: asset-url("image.jpg");
}
}
and I have the following in my application layout:
<head>
<%= stylesheet_link_tag "welcome" if controller_name == "welcome" %>
</head>
and in config/initializers/assets.rb :
Rails.application.config.assets.version = '1.0'
Rails.application.config.assets.precompile += %w( welcome.css )
5 answers
solution1
2 2014-09-05 16:16:19
Add specific css,
body.welcome
{
background: {
image: asset-url("image.jpg");
}
}
and in html,
<body class="container welcome">
You must be wondering even though you have not included specific file then why it is applying all over. This is because you must have specified require_tree . in application.css
solution2
2 2016-08-08 20:06:01
In Rails: Try creating a css class for the background image
.splash {
background-image: image-url("image.jpeg");
background-size: cover;
background-position: center;
background-attachment: fixed;
}
If you want all pages to display the image
<html class="splash"> ... </html>
But on one page only, on that view page, wrap everything in
<body class="splash"> ... </body>
solution3
0 2014-09-05 16:11:51
You are overriding body for the entire application. Make a class instead and call it using div on the page you want to display the background image.
Also, you are calling the use of the stylesheet from the application layout rather than the page itself.
solution4
0 2014-09-06 09:07:09
Stylesheet
#app/views/layouts/application.html.erb
<head>
<%= stylesheet_link_tag controller_name if controller_name == "welcome" && action_name == "home" %>
</head>
#app/assets/stylesheets/welcome.css.scss
body {
background: {
image: asset_url("image.png");
}
}
#config/application.rb
config.assets.precompile += %w(welcome.css)
This should load the welcome stylesheet if you're visiting the welcome#home view. I would strongly recommend against using classes to determine this page - it's far cleaner to include a stylesheet, as this will give you scope to extend the functionality as you wish
--
Test
To test this, you should first look at whether your welcome.css is being loaded when you hit the welcome#home view. To do this, you just need to right-click > view-source .
If the stylesheet is present, you'll want to ensure your styling is performing correctly. This will be trickier to debug, but will just entail you looking at the loaded CSS file & seeing what it's doing with the elements on your page.
If you do the above, comment as to whether you're seeing the welcome.css in your source. If you are, it's a good sign, and we'll be able to look at the CSS after that
solution5
-2 2014-09-05 17:41:45
Your welcome.css file is being included by the asset pipeline so will apply the background on every page. In order to apply the background image to the body only on the home page, you need to apply a class to the body when the home page displays.
However, if you are correctly using layouts, the opening <body> tag will be in your application.html.erb or in a partial so not available in your home.html.erb . You will need it to add it dynamically so I suggest you use a small jQuery script at the end of your home template.
<script>$('body').addClass('home-page');</script>
Then you can amend your CSS to
body.home-page {
background: {
image: asset-url("image.jpg");
}
}
That should give you the results you require.
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.