在jumbotron中不显示背景图像

我在Rails 3.2.21上运行Ruby 1.9.3。我已将jumbotron类添加到了我的idex.html.erb文件的顶部。在jumbotron中不显示背景图像

<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现在显示选中的背景图片，但我的不是。我的只是一个带有文字的盒子，图像不在那里。

我做错了什么？

来源

2015-04-04 cb_1215

可以在线路的custom.css.scss到：

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

红更多关于建设css文件的URL与资产管道：http://guides.rubyonrails.org/asset_pipeline.html#css-and-sass

来源

2015-04-04 03:04:32 spickermann

我试过了。同样的结果，图像仍然没有显示。 – 2015-04-04 03:06:21

在css文件中生成什么URL？服务器上清单文件中该文件的URL是什么？部署到服务器时是否编译了资产？ – spickermann 2015-04-04 06:11:28

对不起，我非常喜欢这个。这是我与RoR的第一个应用程序。我不明白你在问什么。如果有帮助，这些文件在这里：https：//github.com/crista-b/etsydemo – 2015-04-04 12:42:59

好了，我的背景图像显示，但那是只需在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>

但我不能让字体改变。

来源

2015-04-09 17:26:27

我也只设法背景图像添加为内嵌在

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

添加背景图片属性的任何兴田CSS文件，没有工作的HTML代码（我改变了“到”我试过bootstrap.min.css，jumbotron-narrow.css，创建我的onwn样式表，并在任何其他CSS后调用它...

没有别的工作对我来说： - - （

来源

2015-06-18 10:01:08 aureli

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

来源

2015-12-20 02:47:28

在你的CSS放这个代码。设置“资源网址”似乎有伎俩。希望这个如果有帮助。

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

来源

2016-02-16 15:08:34

我有同样的问题，只是发现了一个解决方案。我用一个div class =“容器流体”在jumbotron的内部并将我的图像添加到它。出于某种原因，只有内联样式似乎工作，所以我添加了所有我的样式内联。因此

我的代码如下：

来源

2017-05-18 02:59:00 Bhuvana

在jumbotron中不显示背景图像

回答

相关问题