web-dev-qa-db-ja.com

cssからRailsで背景画像を設定するには？

私はRails 3.2を使用しています。ページの1つに背景を設定する必要があり、多くの方法を試しましたが、何もうまくいきませんでした。

background: url(<%= asset_path 'background.jpg' %>)

background: url("public/background.jpg");

background-image:url('/assets/images/background.jpg')

そして、何も働きませんでした。私を助けてください。

cssruby-on-railsruby-on-rails-3ruby-on-rails-3.2background-image
46
logesh

CSSで：

background-image: url(background.jpg);

または

background-image: url(/assets/background.jpg);

environments/production.rb：

# Disable Rails's static asset server (Apache or nginx will already do this)  
config.serve_static_assets = false

# Compress JavaScripts and CSS  
config.assets.compress = true

# Don't fallback to assets pipeline if a precompiled asset is missed  
config.assets.compile = false

# Generate digests for assets URLs  
config.assets.digest = true
36
Rajarshi Das

Sass（s​​css）の場合、このコードは次の画像パスで動作します

app/assets/images/pictureTitle.png

body { 
  background-image: image-url('pictureTitle.png'); 
}

Railsサーバー。

21
ernbrn

Public/bg.jpgのようなパブリックディレクトリに画像がある場合

background-image: url('/bg.jpg')

App/assets/images/bg.jpgに画像がある場合

 background-image: url('/assets/bg.jpg')
10
Bachan Smruty

この問題は、あなたが考えているよりも深く染み込んでいる可能性があります。ほとんどの場合、Rails資産問題ではないが、html要素間の 'miscommunication'が原因です。理由は次のとおりです。

  1. まず、背景画像をbody要素に配置することで、コードをだましません。

    body {
background: url('pic-name.jpg') no-repeat center center;
background-size: cover;}  /* For a full size background image */
  2. 次に、開発者ツールコンソールをチェックして、画像が正しく読み込まれているのか、404が見つからないのかを確認します。
  3. 404を指定した場合、CSS構文は正しくありません。404が表示されなくなるまで、この投稿の他の回答を試してください。

  4. コンソールがもう404を表示しないことに気付いたら、これで実際に画像が読み込まれることを確認します。

    http：// localhost：3000/assets/pic-name.jpg

    • これは個人によって異なる可能性があることを理解していますが、試してみて、写真の名前を使用していることを確認してください。
  5. うまくロードできれば、犯人はわかっている-body要素が何かを隠している-bodyに画像を入れると機能し、別の要素に入れると機能するありません。

  6. これがトリックです。背景画像が必要なother要素に、私のものはheaderで、テキストまたは行を挿入します。はい、単なるテキストまたは何かです！私は：

    <header>
   <%= render 'shared/navbar' %> # To have the nav's backgrond as the image
   <div class="container">
      <div class="text-center">
        <h2><strong>Nairobi</strong></h2> <hr>
        <h2><strong>Is</strong></h2> <hr>
        <h2><strong>Just a Beula Land</strong></h2> <hr>
      </div>
  </div>

  7. そして悲しいかな、うまくいきました！完全な画像は表示されませんでしたが、上部のみが表示されました。しかし、少なくとも私はそれが機能することを知っていました。

  8. さらにテキストを追加すると、画像は下に伸びます（さらに表示されます）

これが誰かを助けることを願っています。これに加えて、ブートストラップを使用している場合は特に、navを覆うように背景画像を配置するのはそれほど簡単ではないことがわかりました。 navと他の要素の両方が同じparent elementのchildrenである必要があります。たとえば、上記のように私のものはheaderでした。また、 homepage.html.erbでレンダリングするだけでなく、application.html.erbなどのページ内でナビゲーションをレンダリングする必要があります。

更新

さて、これはあちこちにテキストを挿入せずに完全な背景画像を表示するためにしたことです。 CSSがあるapplication.scssに、次のように単にheightプロパティを追加しました

     body {
background: url('pic-name.jpg') no-repeat center center;
background-size: cover;
height: 600px;}

N.B：height: 100%の使用は機能しませんでした。

3
Ruto Collins

上記の提案に従いました（ありがとう！）-他の人にとってもうまくいかない場合に備えて-この解決策は私のために働いた：

.myClass {
   background: image-url('myPicture.png');
}

したがって、「background-image」の代わりに、scssで「background」を使用する必要がありました。

3
Georg Keferböck

Sass（s​​css）を使用している場合、image-url関数を使用します。

body {
  background-image: image-url('texture.png'); // link to /assets/images/texture.png
}
3
atomAltera

わかりました、これが誰かを助けることを望みます!!私は最近、テーマに画像を実装しようと考えていた同様の状況にありました。 app/assets/imagesフォルダーにblog_image.jpegという画像がある場合、このソリューションはhome_page_header.html.erbファイルで機能しました。

<!-- Page Header -->
<header class='masthead' style='background-image: url(assets/blog_image.jpeg)'>
  <div class='container'>
    <div class='row'>
      <div class='col-lg-8 col-md-10 mx-auto'>
        <div class='site-heading'>
          <h1>Omega</h1>
          <span class='subheading'>Sample text</span>
        </div>
      </div>
    </div>
  </div>
</header>
0
TheMissingNTLDR

これに対する多くの答えは、もともとERBヘルパーを使用しようとしていたため、元の質問に対処するソリューションを投入すると思いました：

Kangkyuからの上記のリンク に続いて、.cssファイルに.erbファイル拡張子を追加することが可能であることを学びました。これは間違いなくカンギュがしたことです。

application.css.erb

これにより、ヘルパーメソッドにアクセスできます。

画像への正しいパスを見つけ出すことに煩わされる代わりに、私は以下を使用しました。

<%= asset_path "image_name.png" %>

cSSプロパティ/値のペアは次のようになります。

background-image: url(<%= asset_path 'foo.jpg' %>);
0
J.R. Bob Dobbs

以下のコードを試してください、それは間違いなく動作します：

.background-style {
    background-image: url("../images/background.jpg");
}
0
Kushagra Sharma

私はこれに一日中苦労しました。最後に、背景画像を保持するビューでcssをコーディングすることにより、開発と生産の両方で機能するようにしました。

<head>
    <style>
        #tile {
            background: url(<%= asset_path 'background.jpg' %>);
            background-size: cover;
            }
    </style>        
</head>

次に、シート自体に、次のようなid = tileのdivを作成しました。

<div id=tile>
  <div class=row>
  ...added more stuff
  </div>
</div>

Ruby 2.3.7 Rails 5.2.0

0
tomb