Bootstrap-CSS/HTML Hintergrundbild Größe ändern

Mit bootstrap, wenn ich die Größe meines Browsers, das Bild, das der hintergrund verkleinert wird und die hintergrund Farbe nicht.

Hier ist der link zu der Website, die enthält den HTML-code: http://codedifferently.com/crest.html

Hier ist der CSS code, den ich verwendet:

@charset "UTF-8";

/* CSS Document */


/* Move down content because we have a fixed navbar that is 50px tall */

body {
  padding-top: 0px;
  padding-bottom: 20px;
}

div.jumbotron {
  background-image: url('img/chicago2.jpg');
  background-color: #3FF;
  background-size: 100%;
  height: 500px;
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
}

div.navbar navbar-default navbar-static-top" role="navigation {
  border: 0px;
}
  • Wenn Sie sagen, die hintergrund-Farbe nicht verkleinern, meinst du das blau hinter deinem Bild?
  • Ja, hast du irgendwelche Empfehlungen, wie ich die Größe dieses? Ich will es zu schauen, wie Sie diese website: crestonsolutions.com Es ist gebaut mit wordpress, aber es dauert ewig zu laden. Es ist eine statische Website, so dass ich dachte, es wäre besser, um es wieder aufzubauen mit HTML und CSS.
  • Ändern Sie background-size: 100% background-size: cover; in div.jumbotron
  • Bitte verwenden Sie keine "bootstrap" - tag, mit "twitter bootstrap", da es etwas anderes bedeutet
InformationsquelleAutor cbandara | 2014-10-05
  1. 3

    Wenn ich das richtig verstanden habe, nicht sicher, weil die background-color tun NICHT schrumpfen, aber ich denke du meinst, dass dein Bild sollte die Größe und die Farbe sollte NICHT erscheinen mag, wenn es jetzt in der vollen Ansicht. Wenn also verstehe das richtig.

    Ändern:

    background-size: 100%;

    zu

    background-size: cover;

    und fügen Sie den browser-Anbieter, um es cross-browser:

    -webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;

    Sehen mehr info über background-size

    • Füge ich all dies, um das div-tag in meinem CSS?
    • Erstens wie ich schon sagte in meiner Antwort, ersetzen Sie einfach die 100% für cover dies wird es funktioniert in modernen Browsern, aber um es cross-browser, in Ihrem CSS-Datei in dieser Klasse sprechen Sie über div.jumbotron hinzufügen, was ich schon in meiner Frage. verstehen?
    • Dies ist die richtige Antwort, wenn Sie wollen einfach nur die hintergrund-Größe zur Abdeckung des div-Sie haben eine Feste Höhe auf, was Sie tun (500 Pixel auf .jumbotron). Dies wird nicht mehr schrumpfen das Bild, wie vorher. HIERFÜR haben Sie verschiedene Optionen. 1. Sie können die prozentuale Höhe (50% etc), damit der div - (.jumbotron) kann schrumpfen im Verhältnis. 2. Verwenden Sie css media queries um die Höhe des div (.jumbotron) für verschiedene Bildschirm-Größen. 3. Ein Aktuelles Bild <img> anstelle von background-image.
    InformationsquelleAutor dippas
  2. 1

    Dein problem kommt von der Leitung background-attachment: fixed;. Was ist der hintergrund fixiert beim scrollen, und die background-position ist relativ zu Ihrem Fenster. Also im Endeffekt ist der hintergrund zentriert ist relativ zu dem Fenster, der nicht Ihre jumbotron.

    sehen CSS problem mit background-attachment:fixed;

    Bearbeiten:
    Ich bevorzuge @dippas Lösung.

    • das wird nicht das Problem hier. entfernen position:fixed nicht fix.
    • ich weiß, das Lesen Ihrer Antwort wieder nach der Buchung mir gab mir einen neuen Einblick auf das problem. Ich glaube, ich war ein bisschen voreingenommen, weil in meinem Kopf mit diesem hintergrund behoben, war ein problem. Das ist, warum ich von Ihnen positiv bewertet werden Ihre Antwort.
    InformationsquelleAutor Antoine Combes
Schreibe einen Kommentar