I am using Rails 4, with Bootstrap 3 (sass).
I have the following files in my project:
This css is in my framework_and_overrides.css.scss
.jumbotron {
margin-bottom: 0px;
background-image: image-url("jumbotron.jpg");
background-color: none;
background-size: cover;
background-repeat: no-repeat;
}
Note, i have seen posts which suggest that rails doesn't recognise 'background-image' and should be replaced with 'background', and others that say that 'image-url' should be replaced with 'url'. Neither of these work for me.
The above css file is in the stylesheets tree, which gets included in my application.css.scss by:
*= require_self
*= require font-awesome
*= require_tree .
*/
My application view has this in it.
<!DOCTYPE html>
<html>
<head>
<title>testingthesetup</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><%= content_for?(:title) ? yield(:title) : "test" %></title>
<meta name="description" content="<%= content_for?(:description) ? yield(:description) : "t2" %>">
<%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true %>
<%= javascript_include_tag "application", "data-turbolinks-track" => true %>
<%= csrf_meta_tags %>
</head>
<body>
<%= yield %>
<div class="jumbotron">
</div>
</body>
</html>
I was expecting the view to render a jubmotron that has the background image in it. It doesn't give me anything. I amended the framework and overrides css to test that it was picking up the style by adding a background colour. That worked. There is a problem with the image that I can't find a solution to. I have tried using several images in jpg, gif and png formats. None of them work.
Does anyone have any advice as to why not? I have been fiddling with the way I have been defying the image path in the framework and overrides css all day. I'm now 6 hours in and have no hair left. Please help!
thank you.
