Dehnung Bilder bei der Verwendung als Hintergrundbild

Habe ich versucht ein Bild als hintergrund Bild für meinen django-Anwendung. Aber wenn ich es, es wird immer angezeigt, wie Fliesen-Bild. d.h. ohne tatsächlich stretching das Bild, dasselbe Bild ist gefliest und gezeigt, 4 mal. Kann jemand mir sagen, wie um das Bild zu Strecken, und legen Sie es als Hintergrundbild. Ich füge meinen code hier. Ich bin sicher, dass einige Attribut sein muss, gibt es diese Einstellung, die ich couldnt finden, auf googeln.

<body bgcolor=" #408080" background="/static/paper.jpg" background-size: 100%; >
  • Es funktioniert nicht ordnungsgemäß, da Sie deprecated markup und versuchen, eine CSS3-Eigenschaft, die als ein element-Attribut.
  • Dies ist weder Django noch Python verwandt.
  • Warum nicht Sie die Größe des Bildes an die richtigen Proportionen, bevor Sie es als hintergrund? Würde das nicht dazu beitragen, die Qualität auch?
InformationsquelleAutor rv_k | 2011-04-12
  1. 1

    Können Sie Strecken Sie Ihre hintergrund 100% Breite und Höhe, indem Sie Ihr Bild in einem <img> - tag und geben Sie ihm einen z-index von -1, so wirkt es wie ein hintergrund und ist hinter alles andere. Dies funktioniert in allen Browsern. 

    <img src="..." />

img{
    position:absolute;
    z-index:-1;
    width:100%;
    height:100%;
}

    Wenn Sie nicht wollen, zu brechen, das Seitenverhältnis, nur entweder Breite oder Höhe und nicht beide.

    Check funktioniert beispielsweise bei http://jsfiddle.net/UXBRM/1/

    InformationsquelleAutor Hussein
  2. 4

    Statt mit einem hintergrund-Bild auf dem body-tag fügen Sie ein Bild-tag, direkt unterhalb der Körper, setzen Sie die position auf absolute und eine niedrige z-index und dann width=100% und height=100%.

    • Nicht, die verzerren das Bild, indem man das Seitenverhältnis?
    • Diese hatte ich bereits - hat nicht so Recht geklappt. Trotzdem danke
    InformationsquelleAutor femseks
  3. 3

    Bewerben Sie sich dieses als Stil, nicht als Attribut. Das wird funktionieren, wenn Ihr browser unterstützt CSS 3:

    style="background: url(/static/paper.jpg); background-size: 100%;"

    Einige hintergrund-info:

    http://css-tricks.com/perfect-full-page-background-image/

    http://css-tricks.com/how-to-resizeable-background-image/

    InformationsquelleAutor Aaron Digulla
  4. 2

    Kurz: Nein, man kann das Hintergrundbild nicht Strecken, Bild mit html/css1/css2, Sie sind nur die Optionen verwenden, css3 ( die Hexe ist nicht voll unterstützt von allen Browsern ), oder zu verwenden, background-attachment und background-repeat css-porperties zu erreichen, um eine alternative Ergebnis ...

    Andere Möglichkeit wäre die Verwendung von einem img-tag als hintergrund mit z-index css proprety allerdings finden Sie es schwierig, um es arbeiten proprely in allen gängigen Browsern .

    InformationsquelleAutor Poelinca Dorin
  5. 0

    Bearbeiten Sie Ihr Bild mit Farbe. Klicken Sie auf Bild und speichern Sie Ihr Bild nach Ihrem Bedarf.

    Dies funktioniert in jedem html -, sicherlich.

    InformationsquelleAutor piyush
  6. 0

    Als andere erwähnen,, Sie sollten immer versuchen, zu definieren, wie viel der Attribute in der css und nicht direkt dort, wo Sie den Pfad zu dem Bild selbst. Dies ist, wie es gemacht wurde Weise zurück und ist veraltet und wahrscheinlich der Grund, warum es nicht funktioniert.

    verwenden Sie die img src="poefwpf.png" und vielleicht eine zu einfache Bearbeiten in deinem css:

    #imgex img {
    width: 100%; 
    height: 100%; 
    (maybe also z-index:-1;)
}
    InformationsquelleAutor Emanuel Olsson
Schreibe einen Kommentar