在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中不顯示背景圖像

回答

相關問題