CSSを使ってRailsアプリケーションで背景画像を設定するには

-1

私はレールアプリを構築していて、ウェルカムページの背景画像を設定しようとしています。何らかの理由で画像が表示されず、理由がわかりません。私はここで数多くの質問を見てきましたが、私はまだ解決できません。CSSを使ってRailsアプリケーションで背景画像を設定するには

welcome.css.scss

body { 
    background: url('/assets/mamaknowscollage.jpg'); 
}

私も試した（他の多数のバリエーションの中） - -

はここに私の最新のコードです。ここのhtmlだ

body { 
    background-image: url('/assets/mamaknowscollage.jpg'); 
}

（画像ここのタグはロゴ用です）

welcome.html.erb -

<header> 


</header> 
<body> 


      <image><%= link_to image_tag('MamaKnowsLogo.jpg'), root_path, id: "logo" %></image> 

</body>

私はURLパスをそのままにしていますが、アセットなしでも試してみましたが、それでも動作しません。

私が間違っていることは何ですか？

出典

2016-05-25 Mike.Whitehead

あなたの画像はどこにありますか？例： 'app/assets/images/mamaknowscollage.jpg'は動作します –

あなたの画像の場所を教えてください' path' –

はい、上記のパスにあります。 –

welcome.css.scssファイルの名前をwelcome.scss.erbに変更して試してみることができます。（SCSSが動作します！）

画像ファイルは資産/画像に配置する必要があります

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

としてパスを書きます。

出典：Rails Guide

出典

2016-05-25 10:27:53 Ashwin

私はブートストラップを使用しているので、ファイルを.scssにする必要があります。 –

ok！ scssの名前を.erbに変更します。つまり、welcome.css.scssの場合はwelcome.css.scss.erbに変更してください。scssが機能します。 – Ashwin

しかし、これは私のスタイルファイルをスタイリングの目的で使うためには名前を変更する必要があるのではないでしょうか？たとえば、ページにロゴが表示されていますが、なぜ1つの要素をスタイルすることができますが、別の要素を追加することはできませんか？ –

ファイルがassets/imagesフォルダ内にある場合は、welcome.scss.erbにファイルの名前を変更し、まずこの

background: image-url('mamaknowscollage.jpg');

出典

2016-05-25 10:29:32 sajinmp

私はすでにこれを試してみましたが、うまくいきません。 –

のようにそれを行います。
welcome.scss.erbをapplication.css.erbに必ず含めてください。

だけの行を追加します。それが動作するかどうか、あなたがチェックする必要があり

*= require welcome

を - 例えば、青に背景を設定してみてください。
最後に、画像への正しいパスを簡単に把握する必要があります。

出典

2016-05-25 10:39:35

私はスタイリングできるウェルカムページにロゴを持っていますが、なぜこれを行うことができますが、背景イメージを追加できないのでしょうか？私は上記のHTMLを追加した、私は間違って何かをしている必要があります - それはおそらく死んで明らかですが、私はそれを見ることができません。 –

'welcome.css'内からロゴを変更できますか？ –

はい、私はそれを改訂して配置し、それに接しました。すべて正常に動作します。 –

scssを使用すると、次のようにそれを行うことができます。

body { 
background:url(asset-path('mamaknowscollage.jpg')) 0px 0px; 
}

mamaknowscollage.jpgファイルは、この問題についてassets/images

に配置する必要があり、私はあなたがimageタグを削除すべきだと思います。

<body> 
    <%= link_to image_tag('MamaKnowsLogo.jpg'), root_path, id: "logo" %> 
</body>

出典

2016-05-25 10:42:13

これも試しても機能しません。 –

これはうまくいきません。上で説明したアセットパスのリンクは、コードを正しく適用しません。 –

まず、あなたのイメージがapp/assets/imagesフォルダ内にある場合、使用@import '歓迎' を追加しapplication.scssファイルにapplication.scss

にwelcome.scssと application.cssに

をCSSファイル welcome.cssの名前を変更します。

あなたのイメージがapp/assets/images/SomeFolderフォルダ内にある場合、使用します。

background: image-url("SomeFolder/my_image.jpg");

出典

2016-05-25 13:50:56

かなり工夫した後、私はwelcome.html.erbファイルにbody要素に「クラス」を追加し、適切なCSSコードを適用することによって、問題を修正 -

body.background { 
    background: url('mamaknowscollage.jpg'); 

    }

HTML - 貢献をしたすべての人へ

<body class="background"> 

    <div class="welcome"> 



     <%= image_tag('MamaKnowsLogo.jpg') %> 

    </div> 

</body>

感謝。

出典

2016-05-25 14:53:21

CSSを使ってRailsアプリケーションで背景画像を設定するには

答えて

関連する問題