it-swarm.com.de

Einfügen eines Hintergrundbildes in CSS (Twitter Bootstrap)

Wie kann ich meiner Website einen Bildhintergrund hinzufügen? 

body {
     margin: 0;
     background: url(background.png);
     background-size: 1440px 800px;
     background-repeat:no-repeatdisplay: compact;
     font: 13px/18px "Helvetica Neue", Helvetica, Arial, sans-serif;

Ich habe so viel gemacht, aber auf meiner Seite wird nichts angezeigt. Ich bin ein CSS-Anfänger.

Aktualisierte:

body {
 margin: 0;
 background-image: url(.../img/background.jpg);
 background-size: 1440px 800px;
 background-repeat:no-repeat;
 display: compact;
 font: 13px/18px "Helvetica Neue", Helvetica, Arial, sans-serif;
24
AppSensei

Setzen Sie die Hintergrund-URL in Anführungszeichen.

Es sollte background: url('background.png'); sein

Siehe hier für die Demo-Arbeit.

Es gibt auch ein Problem mit dem background-repeat line, bei dem zwischen zwei Anweisungen ein Semikolon fehlt. Wenn Ihr Hintergrund wirklich klein ist, werden Sie ihn aufgrund dieses Problems nicht sehen.

Zur Aktualisierung der Lösung wurde unter anderem die Hintergrunddatei mit .../background.jpg aufgefrischt, wenn ../background.jpg (2 Punkte, nicht 3) hätte sein sollen.

40
sachleen

ist das Problem nicht die folgende Zeile ist falsch, da die Anweisung für background-repeat nicht vor der nächsten Anweisung für display... geschlossen wird.

background-repeat:no-repeatdisplay: compact;

Sollte das nicht sein? 

background-repeat:no-repeat;
display: compact;

das Hinzufügen oder Entfernen von Anführungszeichen (meiner Erfahrung nach) macht keinen Unterschied, ob die URL korrekt ist. Ist der Pfad zum Bild korrekt? Wenn Sie einer Ressource in einem CSS einen relativen Pfad angeben, ist dieser relativ zur CSS-Datei, nicht zur Datei einschließlich des CSS.

6
Mike Sav

Befindet sich Ihr Image im selben Ordner/Verzeichnis wie Ihre CSS-Datei? Wenn ja, ist Ihre Bild-URL korrekt. Ansonsten ist es nicht so. 

Wenn Ihre Ordnerstruktur durch Zufall so aussieht ...

website 
- index.html
- css
- - style.css
- Bilder
- - background.png

Um auf das Bild in Ihrer CSS-Datei zu verweisen, sollten Sie den folgenden Pfad verwenden:

../images/background.png

Das wäre also Hintergrund: URL ('../ images/background.png');

Die Logik ist einfach: Gehen Sie einen Ordner nach oben, indem Sie "../" eingeben (so oft Sie möchten). Gehen Sie einen Ordner nach unten, indem Sie den Ordner angeben, zu dem Sie wechseln möchten.

2
banzomaikaka

Das Hinzufügen eines Hintergrundbildes zu HTML, einem Body oder einem Wrapper-Element zum Erstellen eines Hintergrundbilds führt zu Problemen beim Auffüllen. Überprüfen Sie dieses Ticket https://github.com/Twitter/bootstrap/issues/3169 auf github. ShaunR's Kommentar und auch einer der Ersteller antworten darauf. Die angegebene Lösung in einem erstellten Ticket löst das Problem nicht, bringt jedoch zumindest Probleme, wenn Sie keine responsiven Funktionen verwenden.

Wenn Sie davon ausgehen, dass Sie Container ohne responsive Features verwenden und eine Breite von 960px haben und eine Auffüllung von 10px erreichen möchten, legen Sie Folgendes fest:

.container {
   min-width: 940px;
   padding: 10px;
}
2
sata

Wenn Sie das Hintergrundbild (aus ästhetischen Gründen) nicht wiederholen können, Dieses praktische JQuery-Plugin streckt das Hintergrundbild so, dass In das Fenster passt.

Backstretch http://srobbin.com/jquery-plugins/backstretch/

Funktioniert super...

~ Prost!

1
Paul Brady
body {
    background-image: url(your image link);
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment:fixed;
    background-size: cover;
    background-color: #464646;
}
1

Wenn Sie Folgendes hinzufügen, können Sie die Hintergrundfarbe oder das Bild festlegen. (Ihre CSS)

 html { 
     background-image: url('http://yoursite/i/tile.jpg');
     background-repeat: repeat; 
 }

 .body {
     background-color: transparent; 
 }

Dies liegt daran, dass BS eine CSS-Regel für die Hintergrundfarbe und auch für die Klasse .container anwendet.

Das Problem kann auch die Reihenfolge Ihrer Stylesheet-Importe sein. Ich musste meinen benutzerdefinierten Stylesheet-Import unter den Bootstrap-Import verschieben.

0
Half_Duplex

Für mehr Modularität und für den Fall, dass Sie viele Hintergrundbilder haben, die Sie an jedem beliebigen Ort einfügen möchten, können Sie für jedes Bild eine Klasse erstellen:

.background-image1  
{
background: url(image1.jpg);
 }
.background-image2  
{
background: url(image2.jpg);
 }

fügen Sie das Bild dann an einer beliebigen Stelle ein, indem Sie ein div hinzufügen

<div class='background-image1'>
    <div class="page-header text-center", style='margin: 20px 0 0px;'>
         <h1>blabaaboabaon</h1>
    </div>
</div>
0
Samawi