Rails 5.1 CSSの背景画像IDがロードされていませんか？

私はメインページに背景画像を追加していますが、背景画像は決して読み込まれません。Rails 5.1 CSSの背景画像IDがロードされていませんか？

application.scssファイル：今すぐ

#background { 
    position: fixed; 
    top: 50%; 
    left: 50%; 
    min-width: 100%; 
    max-width: 100%; 
    width: auto; 
    height: auto; 
    z-index: -100; 
    -webkit-transform: translateX(-50%) translateY(-50%); 
    transform: translateX(-50%) translateY(-50%); 
    background: url(background.jpg); 
    background-size: cover; 
}

、同じ行の背景追加：URL（background.jpgを）。

body { 
    color: #fff; 
    text-align: center; 
    text-shadow: 0 .05rem .1rem rgba(0,0,0,.5); 
    background: url(background.jpg); 
}

これはうまくいきますが、バックグラウンドイメージを#backgroundタグに追加すると表示されません。どうしてこんなことに？ここにapplication.html.erbファイルがあります。＃background ID：

<!DOCTYPE html> 
    <html> 
     <head> 
     <title><%= @page_title %></title> 
     <%= csrf_meta_tags %> 


     <!-- Load in the stylesheet file 'application.scss' --> 
     <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> 
     <!-- Load in the javascript file 'application.js' --> 
     <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %> 

     </head> 


     <body> 
     <div class="site-wrapper"> 
      <div class="site-wrapper-inner"> 
      <div class="cover-container"> 

      <div id="background"></div> 



      <!-- Alerts for devise --> 
      <p class="notice"><%= notice %></p> 
      <p class="alert"><%= alert%></p> 


      <!-- Render the nav bar from the shared folder --> 
      <%= render "shared/application_nav"%> 


      <!-- Yield content --> 
      <%= yield %> 

      <!-- Render footer from the shared folder --> 
      <%= render "shared/footer"%> 

      <!-- Load in Gemfile for the Copyright Logo --> 
      <%= source_helper %> 

      </div> 
     </div> 
     </div> 
     </body> 
    </html>

タグを下に変更しても何も変更されませんでした。 background-image、image-url、url（ 'background.jpg'）のバリエーションを使用します。代わりにどちらも助けなかった。

＃background idから-webkit-transformなどがすべて動作しています。

何が原因でしょうか？

ありがとうございます！

出典

2017-12-16 Prometheus

ありがとうございます！私はそれを試してみましたが、まだ画像が表示されませんでした。たとえ私がdivの高さ/幅を変更したとしても（私が以前に行った）、画像はまだ見えませんでした。 id/classの名前を別の名前に変更すると、最終的に問題が解決されたので、バグでした。 – Prometheus

構文に問題はありませんが、部門は空です。その部門にコンテンツを追加すると、背景画像は
と表示されるか、autoではなく画像の実際の高さを指定します。

出典

2017-12-16 12:07:46

あなたの提案をありがとう！一番下には、divの中に何かを置くこと、例えばdivのバックグラウンドidの下にある何かが何か変わることはありません。高さや幅を変えても助けにならなかった。 – Prometheus

1 - あなたは100％
にセットアップあなたの高さと幅を、あなたの（#background）の下、この行を追加することができますotherways - それはあなたの<div>

2の内側にあなたのコンテンツに依存した時間を最も：

background-repeat: no-repeat; 
background-attachment: fixed; 
background-color:orange; 
background-position: center center; 
background-size: auto auto;

ので、それは次のようになります。

#background { 
    position: fixed; 
    width: 100%; 
    height: 100%; 
    top:50%; 
    left:50%; 
    z-index: -100; 

    -webkit-transform: translateX(-50%) translateY(-50%); 
    transform: translateX(-50%) translateY(-50%); 
    background: url(background.jpg); 

    background-repeat: no-repeat; 
    background-attachment: fixed; 
    background-color:orange; 
    background-position: center center; 
    background-size: auto auto; 

}

あなたは幅があなたの <div内容に基づいて増加を可能にしたい場合は、あなたのスタイルをFiに好きなようにあなたが（背景色）の値を変更することができ、もちろん Example

が
してからちょうど削除：

を見ますwidth: 100%; height: 100%;を使用するか、手動で任意のサイズに設定してください。

出典

2017-12-16 13:38:22

だから、いくつかのバグがあったようです。 idをクラスに変更してから、それをtest123のような不気味な名前に変更した後、それは最終的に働いた。私はscsファイル（ブートストラップ4からのテンプレートを使用しています）にバックグラウンドと呼ばれるid/classがすでに存在するかどうかを確認しましたが、何も見つけられませんでした。

とにかく、あなたの時間と提案に感謝します！

EDIT：

#background{ 


}

が正常に動作し、

#background { 


}

ない：実際には、問題は次のようでした。最初の括弧と背景の間のスペースに注意してください。私はjava/jqueryの宝石は私のscssや何かを混乱させていると思いますが、スペースを削除すると完全に修正されました。

出典

2017-12-16 16:56:55 Prometheus

Rails 5.1 CSSの背景画像IDがロードされていませんか？

答えて

関連する問題