web-dev-qa-db-fra.com

Comment définir une image de fond dans Rails à partir de css?

J'utilise Rails 3.2 et je dois définir un arrière-plan pour l'une des pages et j'ai essayé de nombreuses manières et rien ne s'est bien passé, je recherche donc une aide de qualité. J'ai essayé

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

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

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

et rien n'a fonctionné. Aidez-moi, s'il vous plaît.

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

Dans votre CSS:

background-image: url(background.jpg);

ou

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

Dans 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

Pour sass (scss), ce code fonctionne avec le chemin d’image suivant

app/assets/images/pictureTitle.png

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

Vous devrez peut-être également redémarrer votre serveur Rails.

21
ernbrn

Si vous avez l'image dans votre répertoire public comme public/bg.jpg

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

Si vous avez une image dans app/assets/images/bg.jpg

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

Le problème pourrait être plus profondément enraciné que vous ne le pensez. Ce n'est probablement pas un Rails problème d'actif comme beaucoup le supposent, mais 'miscommunication' entre vos éléments html. Voici pourquoi:

  1. Tout d’abord, protégez votre code en mettant l’image de fond dans l’élément body.

    body {
background: url('pic-name.jpg') no-repeat center center;
background-size: cover;}  /* For a full size background image */
  2. Ensuite, vérifiez dans votre console des outils de développement si l’image est correctement chargée ou si elle donne un fichier 404 non trouvé.
  3. Si vous donnez un 404, alors votre syntaxe css n'est pas correcte, essayez n'importe quelle réponse de cet article jusqu'à ce que vous n'ayez plus un 404. Pour moi, l'exemple ci-dessus a fonctionné:

  4. Une fois que vous vous rendez compte que la console ne donne plus un 404, confirmez que l'image se charge réellement avec ceci:

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

    • Je comprends que cela peut varier d’un individu à l’autre, mais essayez-le et assurez-vous que vous avez bien utilisé le nom de votre photo.
  5. Si cela se charge bien, maintenant vous connaissez le coupable - l’élément body cache quelque chose - lorsque vous mettez l’image dans le body, cela fonctionne, lorsque vous le mettez dans un autre élément, cela fonctionne ne pas.

  6. C'est le truc; dans cet élément other où vous voulez l'image d'arrière-plan, le mien était header, insérez du texte ou des lignes, oui, du texte brut ou quelque chose du genre! 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, ça a marché! Bien qu'il ne montre pas l'image complète, juste la partie supérieure. Mais au moins je savais que ça fonctionnait.

  8. Et si vous ajoutez plus de texte, l’image s’étend vers le bas (plus d’images sont affichées)

J'espère que ça aide quelqu'un. Et parallèlement, j’ai réalisé qu’il n’était pas si facile de placer l’image d’arrière-plan pour couvrir le nav également, en particulier si vous utilisiez bootstrap; le nav et votre autre élément doivent être children du même parent element, par exemple, le mien était le header comme indiqué ci-dessus, et vous devrez également rendre la navigation à l'intérieur de votre, disons, homepage.html.erb, et toutes les autres pages, par opposition à un simple rendu sur le application.html.erb

Mettre à jour

OK, c’est ce que j’ai fait pour afficher l’image d’arrière-plan complète sans insérer de texte ici ou là. Dans mon application.scss, où vous avez vos css, j’ai simplement ajouté la propriété height, comme

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

N.B: Utiliser height: 100% n'a pas fonctionné.

3
Ruto Collins

J'ai suivi les suggestions ci-dessus (merci!) - au cas où cela ne fonctionnerait pas pour les autres non plus - cette solution a fonctionné pour moi:

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

donc au lieu de "background-image", j'ai dû utiliser "background" dans mes scss.

3
Georg Keferböck

Si vous utilisez sass (scss), utilisez la fonction image-url:

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

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

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

Beaucoup de réponses pour celui-ci, pensaient que je mettrais dans ma solution, ce qui répond à la question initiale, car ils essayaient à l'origine d'utiliser, entre autres choses, un assistant ERB:

en suivant le lien à partir de Kangky , j'ai appris qu'il était possible d'ajouter l'extension de fichier .erb à mon fichier .css. Ce qui est certainement ce que Kangkyu a fait.

application.css.erb

Cela me donne accès aux méthodes d'assistance.

Au lieu de chercher à trouver le bon chemin vers l'image, j'ai utilisé:

<%= asset_path "image_name.png" %>

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

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

Essayez le code ci-dessous, cela fonctionnera certainement:

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

J'ai eu du mal avec cela pendant une journée entière. Enfin, je l'ai fait fonctionner à la fois en développement et en production en codant le css dans la vue contenant l'image de fond:

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

Ensuite, sur la feuille elle-même, j'ai créé une div avec id = tile comme ceci:

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

Ruby 2.3.7 Rails 5.2.0

0
tomb