Das hinzufügen von hintergrund-Bild in Rails 4
Wie füge ich ein hintergrund Bild in Rails 4? Ich bin versuchen, um es auf einen div habe ich in meinem HTML. Derzeit, das Bild ist in meinem /assets/images
- Verzeichnis.
HTML:
<header>
<div class="background_image">
</div>
</header>
CSS:
.background_image {
background: url(/assets/header-bg.jpg);
}
Mit dem code, den ich derzeit habe, werden keine Bilder angezeigt werden
- Sollte nicht der hintergrund-url-Pfad sein
/assets/images/header-bg.jpg
- nun, ich denke, ohne die Schienen 4, ja, aber ich lese um, und es scheint mir Schienen erfolgt eine Vorverarbeitung, die nicht erfordern den
images
Teil - Werfen Sie einen Blick Here dann
Du musst angemeldet sein, um einen Kommentar abzugeben.
Erstens, Sie brauchen, um hinzuzufügen, um Ihre CSS Datei SCSS Erweiterung, wie
main.css.scss
.Mit, dass Sie verwenden können, die asset-Helfer, wie:
Wie gesagt in der Doku
image-url("header-bg.jpg")
wird"url(/assets/header-bg.jpg)"
.Markup ist derzeit leer (
div.background_image
), so müssen Sie einigeheight
dem Stil machen, damit es funktioniert.Hinweis: damit all dies funktioniert, muss die
sass-rails
gem (es ist Standard in rails 4).height:600px;
zeigt das Bild. Nicht sicher, was zu tun ist, um korrekt angezeigt wird, dieses Bild Strecken wie ich den browser. Ich brauche den Inhalt in meiner CSS das Bild zu skalieren, mit dem browser in der Aufrechterhaltung einer statischen Größe%
) anstelle von fixen Wert (px)
.Dies ist eine alte post, aber ich denke, dies könnte noch eine bessere Antwort. Ändern der Größe des Bilds ist schwierig, in der bootstrap-so bekommen es zu justieren oder zu erscheinen, wie Sie wollen, es wird einige erfordern photoshoping, sondern den code, um es zu bekommen, wo Sie wollen, dass es Aussehen könnte wie folgt dabei sollten Sie in fast allen Browsern:
Zusätzlich können Sie fügen Sie einige mehr css zu Ihrem hintergrund, je nachdem wie groß das Bild und oder Raum ist etwa so:
Hinzufügen
fixed
zu, das zu sperren, Ihr Bild in Platz, kann aber verwendet werden.