Im in Rails 3.2, Bootstrap-sass 3.2.0, and gem 'sass-rails', '3.2.6'. I cannot for the life of me
1) override the default bootstrap css for my Jumbotron.
2) display the background image (which i included under app/assets/images)
3) parallax animation not working...
Here are my files:
app/assets/stylesheets/application.scss
// "bootstrap-sprockets" must be imported before "bootstrap"
@import "bootstrap-sprockets";
@import "bootstrap";
app/assets/stylesheets/custom.css.scss
@import "bootstrap";
.bg {
background: url('assets/images/toystory3.jpg') no-repeat center center;
position: fixed;
width: 100%;
height: 700px; /*same height as jumbotron */
top:0;
left:0;
z-index: -1;
}
.jumbotron {
height: 700px;
color: white;
text-shadow: #444 0 1px 1px;
background:transparent;
}
app/views/home/index.html
<div class="bg"></div>
<div class="jumbotron">
<h1>Bootstrap Jumbotron</h1>
<p class="lead">+ Parallax Effect using jQuery</p>
</div>
app/views/layouts/application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>HEllO</title>
<%= stylesheet_link_tag "application", media: "all" %>
<%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>
</head>
<body>
<div class="container">
<%= yield %>
</div>
</body>
</html>
app/assets/javascripts/application.js
//= require jquery
//= require jquery_ujs
//= require bootstrap-sprockets
//= require_tree .
app/assets/javascripts/home.js
@import "bootstrap";
.bg {
background: url('images/toystory3.jpg') no-repeat center center;
position: fixed;
width: 100%;
height: 700px; /*same height as jumbotron */
top:0;
left:0;
z-index: -1;
}
.jumbotron {
height: 700px;
color: white;
text-shadow: #444 0 1px 1px;
background:transparent;
}
Aucun commentaire:
Enregistrer un commentaire