Geek Answers Handbook

How to make background image appear on only one page in rails 4?

I have a background image on which I cannot stay on one page. I made a welcome controller with one home view to display it. I will also pre-combine my assets. The background looks just fine, but my goal is to just show the background image in 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

style sheets /welcome.css.scss:

 body { background: { image: asset-url("image.jpg"); } }

and in my application layout there is the following:

 <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 )
+7
css ruby ruby-on-rails sass ruby-on-rails-4
source share
5 answers

Add specific css,

 body.welcome { background: { image: asset-url("image.jpg"); } }

and in html,

  <body class="container welcome">

You should be interested, even if you did not include a specific file, and then why use it. This is because you must specify require_tree . in application.css

+2
source share

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 an image

 <html class="splash"> ... </html>

But only on one page, on this viewing page, wrap everything in

 <body class="splash"> ... </body>
+2
source share

You are the main body for the entire application. Create a class and call it using the div on the page on which you want to display the background image.

In addition, you invoke the use of a stylesheet from the layout of the application, not the page itself.

0
source share

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)

You need to load the welcome stylesheet if you are visiting the welcome#home view. I would strongly recommend against using classes to define this page - it’s much cleaner to include a stylesheet, as this will give you the opportunity to extend the functionality of your choice

-

Test

To check this, you should first see if your welcome.css when you get into the welcome#home view. To do this, you just need right-click > view-source .

If a style sheet is present, you want your style to execute correctly. This will be harder to debug, but just entail viewing the downloaded CSS file and viewing its actions with elements on your page.

If you do this, comment on whether you see welcome.css in your source. If so, then this is a good sign, and after that we can look at CSS.

0
source share

Your welcome.css file is included in the asset pipeline, so the background will be applied on every page. To apply a background image to the body only on the home page, you need to apply the class to the body when the home page is displayed.

However, if you use layouts correctly, the opening <body> will be in your application.html.erb or in partial, therefore it is not available in your home.html.erb . You will need 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 change your CSS to

  body.home-page { background: { image: asset-url("image.jpg"); } }

This will give you the desired results.

-2
source share

More articles:


All Articles