Comment définir une image d'arrière-plan dans les rails de css?

Pour sass (scss) ce code fonctionne avec l'image suivante chemin

app/assets/images/pictureTitle.png

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

Vous pourriez aussi avoir besoin de redémarrer votre serveur rails.

Si vous utilisez sass (scss), l'utilisation de l'image-fonction url:

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

Le problème pourrait être plus profond que vous ne le pensez. Il n'est probablement pas un Rails de l'actif problème que beaucoup de présumer, mais 'malentendu' entre vos éléments html. Voici pourquoi:

1. Tout d'abord, la preuve fool votre code en mettant le backgound image dans le body élément.

   body {
   background: url('pic-name.jpg') no-repeat center center;
   background-size: cover;}  /* For a full size background image */

2. Puis vérifiez votre développeur d'outils de la console pour voir si l'image est prise en chargé correctement ou qu'il donne un 404 not found.
3. Si une erreur 404, puis votre feuille de styles css la syntaxe n'est pas correcte, essayez de tout autre de ce post, les réponses jusqu'à ce que vous obtenez n'est plus une erreur 404. Pour moi l'exemple ci-dessus a travaillé:

4. Une fois que vous vous rendez compte que la console ne donne pas une 404 de plus, confirmer l'image se charge avec ceci:

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

   • Je comprends que cela puisse varier d'un individu, mais essayez-le et assurez-vous que vous avez utilisé votre pic du nom.
5. Si il charge bien, maintenant que vous connaissez le coupable - le body élément se cache quelque chose - lorsque vous placez l'image dans le body, il fonctionne, quand vous la mettez dans un autre élément, il fonctionne pas.

6. C'est le truc; dans ce other élément sur lequel vous souhaitez que l'image d'arrière-plan, le mien était header, insérer du texte ou des lignes, Oui, juste en texte brut ou quelque chose! Le mien était:

   <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. Et hélas, il a travaillé! Si elle n'était pas de montrer l'intégralité de l'image, juste la partie supérieure. Mais au moins je savais que ça a fonctionné.

8. Et si vous ajoutez plus de texte, l'image s'étire vers le bas (plus on montre)

Espère que cela aide quelqu'un.
Et parallèlement à cela, j'ai réalisé que ce n'était pas facile à placer l'image de fond pour couvrir le nav ainsi, esp si en utilisant bootstrap; les deux nav et votre autre élément doivent être children de la même parent element, par exemple, le mien était le header comme indiqué ci-dessus, et vous aurez également à rendre la valeur liquidative à l'intérieur de votre, de dire, homepage.html.erb, et toutes les autres pages, plutôt que de simplement rendre sur le application.html.erb

Mise à jour

Bon d'accord, c'est ce que j'ai fait pour montrer l'intégralité de l'image d'arrière-plan, sans insertion de textes ici et là. Dans mon application.scss, où vous avez votre css, j'ai simplement ajouté la hauteur de la propriété, comme

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

N. B: l'Utilisation de height: 100% n'a pas fonctionné.

Ok, espérons que cela aide quelqu'un!! J'ai été dans une situation similaire récemment pour mettre en œuvre une image pour un thème.
Cette solution a fonctionné pour moi dans un home_page_header.html.erb fichier à condition que vous ayez une image appelée blog_image.jpeg dans votre app/assets/images dossier:

<!-- 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>

Beaucoup de réponses pour cette, pensé que je jetterais dans ma solution, qui répond à la question d'origine, car ils ont été à l'origine de la tentative d'utiliser, entre autres choses, une ERB helper:

à la suite de la lien à partir de ci-dessus à partir de Kangkyu, j'ai appris qu'il est possible d'ajouter la .erb l'extension de fichier sur mon .fichier css. Qui est certainement ce que Kangkyu fait.

application.css.erb

Cela me donne accès à l'aide de méthodes.

Au lieu de s'affairer à trouver le chemin d'accès correct à l'image, j'ai utilisé:

<%= asset_path "image_name.png" %>

donc ma propriété CSS/valeur paire ressemble à ceci:

background-image: url(<%= asset_path 'foo.jpg' %>);

Il semble que les guillemets de travail.

Voici mon exemple:

body {
  background-image: url("sunset");
}

Et le coucher du soleil jpeg est situé dans mon dossier des actifs.