Question

我在Rails 3.2.21上运行Ruby 1.9.3。我已将jumbotron类添加到我的idex.html.erb文件的顶部。

<div class="jumbotron">
  <h1>Handcrafted items from <br>
    around the world.</h1>
  <h2>Discover one-of-a-kind items</h2>
</div>

然后在我的 custom.css.scss 文件中，我添加了背景图片的信息：

@import "bootstrap";

body {
    background-color: #F5F5F1;
    color: #333333;
    font-family: Arial, Helvetica, sans-serif;
}

.navbar-default {
    background-color: #EFEFEB;
}

.navbar-default .navbar-brand {
    font-family: guardian-egyptt, georgia, serif;
    font-weight: 400;
    color: #d5641c;
    font-size: 30px;
}

.navbar-default .navbar-nav > li > a {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: bold;
    color: #0192B5;
}

.center {
    text-align: center;
}

.col-md-3:nth-child(4n+1) {
    clear: left;
}

.col-md-6 {
    h3 {font-size: 45px;}
    h5 {font-size: 25px;}
    p {font-size: 18px;}
}

.caption {
    h3 {
        font-size: 17px;
        margin: 2px;
    }
    p {
        font-size: 15px;
        margin: 0px;
    }
}

.jumbotron {
    background-image: url('jumbotron.jpg');

}

文件jumbotron.jpg已按照说明保存到app/assets/images文件夹。这适用于教练，他的jumbotron现在显示所选的背景图像，但我的不是。我只是一个包含文字的方框，图像不存在。

我做错了吗？

Answer 1

好吧，我得到了要显示的背景图片，但这只是在index.html.erb文件中添加内联。

现在该代码：

<div class="jumbotron" style="background-image: url('jumbotron.jpg');"> <h1>Handcrafted items from <br> around the world.</h1> <h2>Discover one-of-a-kind items</h2> </div>

但是我无法改变字体。

Answer 2

custom.css.scss中的行可以：

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

更多关于使用资产管道在css文件中构建网址的更多信息：http://guides.rubyonrails.org/asset_pipeline.html#css-and-sass

Answer 3

我还设法将背景图像添加为

的HTML代码中的内联

 <div class="jumbotron" style="background-image:url('images/imageName.jpg'); background-position:right; background-repeat:no-repeat;">

将background-image属性添加到任何hte CSS文件都不起作用（我为此更改了'to'以及任何其他组合。）我尝试了bootstrap.min.css，jumbotron-narrow.css，创建我的onwn样式表并在任何其他CSS之后调用它......

没有别的东西对我有用！： - （

Answer 4

.jumbotron {
    background: #000 url("image.jpg") center center;
    width: 100%;
    height: 100%;
    background-size: cover;
    overflow: hidden;
}

Answer 5

你在CSS中的

放了这段代码。设置＆＃34; asset-url＆＃34;似乎可以做到这一点。希望这有用。

.jumbotron {
  background-image: asset-url("name_of_image.PNG");
}

Answer 6

我遇到了同样的问题，刚刚发现了一个解决方案。我使用了div class =＆＃34; container-fluid＆＃34;在jumbotron中，并将我的图像添加到它。出于某种原因，只有内联样式似乎有效，所以我添加了所有样式内联。

我的代码如下：

<div class="container-fluid" style="background-image: 
    url('JumbotronPic.png');
    background-size: cover;
    min-height: 100vh;">blah blah blah </div>

没有显示在jumbotron的背景图象

6 个答案: