[RUBY] [Rails 6] So legen Sie ein Hintergrundbild in Rails [CSS] fest

Ich vergesse es immer nüchtern und es hat eine Weile gedauert, bis ich zu den richtigen Informationen gekommen bin. Deshalb möchte ich es als Memorandum aufbewahren, damit ich es nicht vergesse!

So legen Sie mit Rails ein Hintergrundbild fest ①

Platzieren Sie die Bilddatei einfach unter App / Assets / Images und schreiben Sie wie folgt.

`custom.scss`


.background {
  background-image: image-url('haikei_image.jpg');
}

Ich mag dieses, weil es intuitiv ist.

So legen Sie mit Rails ein Hintergrundbild fest ②

Platzieren Sie die Bilddatei auf die gleiche Weise unter App / Assets / Images und schreiben Sie wie folgt. Der Unterschied zu ① besteht darin, dass der Dateiname custom.scss.erb und die Erweiterung .erb lautet.

`erb:custom.scss.erb`


.background {
  background-image: url("<%= asset_path('haikei_image.jpg') %>");
}

Ich habe das zuerst benutzt, weil es hier gut funktioniert hat, aber bald habe ich nach einer anderen Methode gesucht. In diesem Fall wird es natürlich vom Editor als erb-Datei erkannt, sodass die Vervollständigungsfunktion beim Schreiben von CSS verloren geht. Ich fand es ziemlich nervig w Wenn Sie Gegenmaßnahmen haben, würde ich mich freuen, wenn Sie einen Kommentar abgeben könnten!

[Extra Edition] Wie es nicht funktioniert hat

Platzieren Sie Bilder in public / images


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

Es scheint einen Weg zu geben, zu schreiben, aber dies wurde nicht gut reflektiert und es dauerte lange. Ich erhalte einen Neuladefehler auf der Konsole. ..

Vielen Dank für das Lesen bis zum Ende!

Ich gebe das aus, was ich jeden Tag so gelernt habe! Wir freuen uns darauf, Ihnen noch ein wenig zu helfen. Wenn Sie Anregungen oder Eindrücke haben, würde ich mich freuen, wenn Sie einen Kommentar abgeben könnten!

Recommended Posts

[Rails 6] So legen Sie ein Hintergrundbild in Rails [CSS] fest

So fügen Sie ein Video in Rails ein

So implementieren Sie eine ähnliche Funktion in Rails

So erstellen Sie einfach ein Pulldown mit Rails

So implementieren Sie eine nette Funktion in Ajax mit Rails

So schreiben Sie eine Datumsvergleichssuche in Rails

[Rails] So laden Sie JavaScript in einer bestimmten Ansicht

[Schienen] So zeigen Sie Bilder in der Ansicht an

So installieren Sie jQuery in Rails 6

So setzen Sie Lombok in Eclipse

So installieren Sie Swiper in Rails

So zeigen Sie Diagramme in Ruby on Rails an (LazyHighChart)

Wenden Sie CSS auf eine bestimmte Ansicht in Ruby on Rails an

So richten Sie einen Proxy mit Authentifizierung in Feign ein

So implementieren Sie ein kreisförmiges Profilbild mit CarrierWave und R Magick in Rails

So implementieren Sie Suchfunktionen in Rails

So ändern Sie den App-Namen in Rails

Verwendung von MySQL im Rails-Tutorial

[Rails] So konfigurieren Sie das Routing in Ressourcen

So benennen Sie ein Modell mit externen Schlüsseleinschränkungen in Rails um

[Rails] So erstellen Sie eine Teilvorlage

So implementieren Sie Ranking-Funktionen in Rails

So implementieren Sie die Image-Veröffentlichung mithilfe von Schienen

So veröffentlichen Sie eine Bibliothek in jCenter

Verwendung von credentials.yml.enc aus Rails 5.2

So implementieren Sie eine Diashow mit Slick in Rails (einzeln und mehrfach nacheinander)

So erstellen Sie eine Abfrage mithilfe von Variablen in GraphQL [Verwenden von Ruby on Rails]

So aktualisieren Sie Benutzeränderungen in Rails Devise, ohne ein Kennwort einzugeben

[Rails] So wenden Sie das in der Hauptanwendung verwendete CSS mit Administrate an

Schienen: Wie man eine Rechenaufgabe schön schreibt

Mit Rails in eine Tag-zu-URL-Zeichenfolge konvertieren

[Rails] Wie schreibe ich, wenn ich eine Unterabfrage mache?

[Rails] So erstellen Sie ein Diagramm mit lazy_high_charts

[Rails] Verwendung von Auswahlfeldern in Ransack

Wie man Rails allgemein ins Japanische übersetzt

So führen Sie eine djUnit-Aufgabe in Ant aus

So fügen Sie in Spring Boot einen Klassenpfad hinzu

So erstellen Sie ein Thema in Liferay 7 / DXP

So trennen Sie .scss nach Controller in Rails

So fügen Sie die html.erb-Klasse in Rails bedingt hinzu

[Rails] So erstellen Sie eine Twitter-Freigabeschaltfläche

[Rails] Verwendung von PostgreSQL in einer Vagrant-Umgebung

So überprüfen Sie Rails-Befehle im Terminal

So generieren Sie automatisch einen Konstruktor in Eclipse

Wie schreibe ich Rails

So deinstallieren Sie Rails

So stellen Sie das Bild mithilfe der Symbolschriftart (Symbole) links / rechts von der Schaltfläche auf zeichnbar ein

Ein Memo zum Erstellen eines einfachen Formulars, das nur HTML und CSS in Rails 6 verwendet

So erstellen Sie eine eindeutige Datenkombination in der Schienen-Zwischentabelle

So machen Sie ein Bild mit Processing teilweise transparent

So löschen Sie alle Daten in einer bestimmten Tabelle

So erstellen Sie eine Java-Umgebung in nur 3 Sekunden