eingebettet in Schienen CSS-Dateien

Question

Ich versuche, einen div-Container zu stylen und ein Hintergrundbild hinzufügen, das ist ein Bild von einem Benutzer hochgeladen und in der Datenbank gespeichert (adventure.image.url). Ich bin nicht sicher, wie man Erbcode in die CSS-Datei einbetten würde. Hier

ist der Code aus der index.html.erb Datei:

<div class="adventure_container"> 
 
     <% @adventures.each do |adventure|%> 
 
     <div class="adventure"> 
 
      <%= link_to "#{adventure.title}", adventure_path(adventure.id), class: "adventure_title" %> 
 
      <%= (image_tag adventure.image.url(:medium), class:'adv_img') %> 
 
     </div> 
 
     <% end %> 
 
    </div>

Und hier ist die CSS (oder SCSS) Code, den ich um das Bild als Hintergrund hinzufügen möchten zu:

.adventure { 
 
    display: flex; 
 
    text-align: center; 
 
    width: 300px; 
 
    height: 200px; 
 
    // background-color: #e9e8e8; 
 
    background-image: url() 
 
    margin: 1%; 
 
    // border: 1px solid purple; 
 
    border-radius: 15px; 
 
}

Vielen Dank.

Answer 1

Sie können Inline-Styling wie folgt verwenden:

<div class="adventure" style="background: url(<%= adventure.image.url(:medium) %>) no-repeat"> 
     <%= link_to "#{adventure.title}", adventure_path(adventure.id), class: "adventure_title" %> 
</div> 

und CSS nur hinzufügen:

<%= link_to "#{adventure.title}", adventure_path(adventure.id), class: "adventure_title", :style => 'background-image: url('+adventure.image.url(:medium)+')' %> 

Answer 2

Bitte die Änderung zum folgenden Code hinzufügen.

<div class="adventure_container"> 
 
    <% @adventures.each do |adventure|%> 
 
    <div class="adventure"> 
 
     <%= link_to "#{adventure.title}", adventure_path(adventure.id), class: "adventure_title", style: "background-image: url(#{asset_path(adventure.image.url(:medium))});" %> 
 
    </div> 
 
    <% end %> 
 
</div>

Oder

<div class="adventure_container"> 
 
    <% @adventures.each do |adventure|%> 
 
    <div class="adventure"> 
 
     <%= link_to "#{adventure.title}", adventure_path(adventure.id), class: "adventure_title", style: "background-image: url(#{asset_path(adventure.image.url(:medium))});" do %> 
 
     <%= (image_tag adventure.image.url(:medium), class:'adv_img') %> 
 
     <% end %> 
 
    </div> 
 
    <% end %> 
 
</div>

// I am not a css guy. But you get the idea to adjust the background div accordingly. 
 
.adventure { 
 
    display: relative; 
 
    // background-color: #e9e8e8; 
 
    // border: 1px solid purple; 
 
    border-radius: 15px; 
 
} 
 
.adv_img { 
 
    position: absolute; 
 
    text-align: center; 
 
    width: 300px; 
 
    height: 200px; 
 
    margin: 1%; 
 
}

Answer 3

Sie ein Hintergrundbild zu einem div diese dynamisch wie hinzufügen können.