7

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 )
dobsoft
  • 109
  • 1
  • 7

5 Answers5

2

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

maximus ツ
  • 7,949
  • 3
  • 25
  • 54
2

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>
foureyedraven
  • 327
  • 4
  • 12
0

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.

jreinecke
  • 26
  • 3
  • This does not provide an answer to the question. To critique or request clarification from an author, leave a comment below their post - you can always comment on your own posts, and once you have sufficient [reputation](http://stackoverflow.com/help/whats-reputation) you will be able to [comment on any post](http://stackoverflow.com/help/privileges/comment). – Achrome Sep 05 '14 at 17:59
  • So I should give him/her the direct answer rather than pointing them in the right direction? My answer was to make a CSS class and call it on the page. – jreinecke Sep 05 '14 at 18:35
0

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

Richard Peck
  • 76,116
  • 9
  • 93
  • 147
  • Thanks for the help. I did all of the above, and my welcome.css is in the source. The background image is still every page though. – dobsoft Sep 06 '14 at 19:31
  • Do you have a link I could look at? On Heroku/ – Richard Peck Sep 06 '14 at 19:33
  • If you set one up, it will be greatly appreciated! I remember answering your question before - I want to get this sorted out once and for all. Something is causing a problem – Richard Peck Sep 06 '14 at 19:48
  • Okay thanks for your help, yes it has been frustrating figuring this out. I'll comment here when its ready – dobsoft Sep 06 '14 at 20:06
  • Do you need any help with it? – Richard Peck Sep 06 '14 at 20:17
  • I might as I just gave deploying my app a quick try and I'm having trouble, but I will probably not be able to take care of it until tomorrow. – dobsoft Sep 06 '14 at 20:32
  • No problem, take your time. I'm guessing you haven't pushed to Heroku before? – Richard Peck Sep 06 '14 at 20:40
  • Correct, I'm working on it now, I'm having trouble switching to postgresql I asked a question about it here http://stackoverflow.com/questions/25714338/i-am-having-trouble-pushing-my-rails-app-to-heroku-getting-the-pg-gem-to-insta – dobsoft Sep 07 '14 at 20:14
-2

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.

surreymagpie
  • 327
  • 1
  • 4