Ein Hintergrundbild in CSS einfügen (Twitter Bootstrap)

Wie kann ich meiner Website einen Bildhintergrund hinzufügen?Ein Hintergrundbild in CSS einfügen (Twitter Bootstrap)

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 getan, aber nichts zeigt sich auf meiner Seite. Ich bin ein CSS-Anfänger.

Aktualisiert:

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;

Quelle

2012-06-08 AppSensei

in Anführungszeichen den Hintergrund url Put.

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

here Siehe Demo arbeiten.

Sie haben auch ein Problem mit der background-repeat line fehlt ein Semikolon zwischen zwei Anweisungen. Wenn dein Hintergrund wirklich winzig ist, wirst du ihn aufgrund dieses Problems nicht sehen.

Zum Aktualisieren der Lösung wurde unter anderem die Hintergrunddatei mit .../background.jpg referenziert, wenn es ../background.jpg (2 Punkte, nicht 3) hätte sein sollen.

Quelle

2012-06-08 16:20:59 sachleen

Ja, zeigt immer noch nichts auf. – AppSensei

Sind Sie sicher, dass der Pfad korrekt ist? – sachleen

Ja, absolut ... – AppSensei

ist nicht das Problem die folgende Zeile für background-repeat wie die Aussage, bevor die nächste Anweisung geschlossen falsch ist nicht für display ...

background-repeat:no-repeatdisplay: compact;

Sollte dies

sein nicht

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

Hinzufügen oder Entfernen von Anführungszeichen (in meiner Erfahrung) macht keinen Unterschied, wenn die URL korrekt ist. Ist der Pfad zum Bild korrekt? Wenn Sie einer Ressource in einem CSS einen relativen Pfad geben, ist dies relativ zur CSS-Datei, nicht zur Datei mit CSS.

Quelle

2012-06-08 16:25:55

Ich habe es behoben. Aber, kein Glück. – AppSensei

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

Wird durch Zufall Ihre Ordnerstruktur wie so ist ...

Homepage
-index.html
-CSS
- - style.css
- Bilder
- - background.png

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

../images/background.png

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

Die Logik ist einfach: Gehen Sie einen Ordner durch Eingabe von "../" (so oft wie Sie brauchen). Gehen Sie einen Ordner nach unten, indem Sie den Ordner angeben, in den Sie gehen möchten.

Quelle

2012-06-08 16:31:34 banzomaikaka

Ich habe alles versucht ... mein Standort stimmt auch. Aber, kein Glück. – AppSensei

was ist das display: kompakt drin für? – banzomaikaka

Es ist nicht das "Display: kompakt" Ich habe mich nur gefragt, warum Sie es verwenden. Ich glaube nicht, dass du es brauchst. Gibt es keinen Tippfehler für Ihren Image-Namen? Gibt es kein Element, das deinen Körperhintergrund mit seinem eigenen Hintergrund abdeckt? – banzomaikaka

Wenn Sie die folgenden hinzufügen Sie die Hintergrundfarbe oder Bild festlegen können (CSS)

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

.body { 
    background-color: transparent; 
}

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

Quelle

2012-07-13 12:15:42

Hinzufügen von Hintergrundbild auf HTML, Körper oder ein Hüllenelement, Hintergrundbild zu erreichen, werden Probleme mit padding verursachen. Überprüfen Sie dieses Ticket https://github.com/twitter/bootstrap/issues/3169 auf GitHub. ShaunRs Kommentar und auch eine der Ersteller Antworten darauf. Die gegebene Lösung in dem erstellten Ticket löst das Problem nicht, aber es bringt zumindest Dinge in Gang, wenn Sie keine reaktiven Funktionen verwenden.

Unter der Annahme, dass Sie Behälter ohne ansprechende Funktionen verwenden und haben eine Breite von 960px und wollen 10px padding erreichen, Sie setzen:

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

Quelle

2013-01-30 03:21:10 sata

Und wenn Sie nicht das Hintergrundbild wiederholen (für ästhetische Gründe), dann diese handliche JQuery Plugin werden das Hintergrundbild strecken, um das Fenster passen.

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

Arbeiten groß ...

~ Cheers!

Quelle

2013-05-20 22:49:24

Weitere Modularität und im Fall, dass Sie viele Hintergrundbilder, die Sie integrieren möchten, wo Sie Sie für jedes Bild kann wollen eine Klasse erstellen:

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

und dann das Bild eingefügt haben, wohin Sie durch Hinzufügen eines wollen div

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

Quelle

2014-07-31 16:34:45 Samawi

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

Quelle

2015-03-04 10:41:12

das Problem kann auch die Reihenfolge der Stylesheet Importen sein. Ich musste meinen benutzerdefinierten Stylesheet-Import unter den Bootstrap-Import verschieben.

Quelle

2016-06-30 18:46:20

Ein Hintergrundbild in CSS einfügen (Twitter Bootstrap)

Antwort

Verwandte Themen