it-swarm.com.de

Kann ein Hintergrundbild größer sein als das Div selbst?

Ich habe eine Fußzeile mit 100% Breite. Es ist ungefähr 50px hoch, abhängig vom Inhalt.

Ist es möglich, diesem #fuß ein Hintergrundbild zu geben, das dieses Div irgendwie überläuft?

Das Bild ist etwa 800x600px und ich möchte, dass es in der linken unteren Ecke der Fußzeile positioniert wird. Es sollte so etwas wie ein Hintergrundbild für meine Website sein, aber ich habe bereits ein Hintergrundbild auf meinen Körper gesetzt. Ich brauche ein anderes Bild in der unteren linken Ecke meiner Website, und der #footer div wäre dafür perfekt.

#footer {
    clear: both;
    width: 100%;
    margin: 0;
    padding: 30px 0 0;
    background:#eee url(images/bodybgbottomleft.png) no-repeat left bottom fixed;
}

Das Bild wird auf die Fußzeile gesetzt, das div wird jedoch nicht überlaufen. Kann man das schaffen?

overflow:visible macht den Job nicht!

65
matt

Ich glaube nicht, dass Sie ein div-Hintergrundbild überlaufen lassen können. Bilder, die in Image-Tags platziert werden, können das übergeordnete Div überfluten, Hintergrundbilder sind jedoch durch das Div eingeschränkt, für das sie den Hintergrund bilden.

41
Daniel Bingham

Es gibt einen sehr einfachen Trick. Setzen Sie die Auffüllung dieses Div auf eine positive Zahl und die Marge auf negativ

#wrapper {
     background: url(xxx.jpeg);
     padding-left: 10px;
     margin-left: -10px;
}
137
transGLUKator

Sie können ein css3-psuedo-Element wie in diesem Artikel gezeigt verwenden

https://www.exratione.com/2011/09/wie-zu-überfluss-a-hintergrund-image-using-css3/

12
Josh Sells

Nein, das kannst du nicht. 

Als solide Problemumgehung würde ich vorschlagen, das erste div als position:relative zu klassifizieren und div::before zu verwenden, um ein darunter liegendes Element zu erstellen, das Ihr Bild enthält. Als position:absolute eingestuft, können Sie ihn relativ zu Ihrem ursprünglichen Div beliebig verschieben. 

Vergessen Sie nicht, dem neuen Element Inhalt hinzuzufügen. Hier ist ein Beispiel:

div {
  position: relative;
}    

div::before {
  content: ""; /* empty but necessary */
  position: absolute;
  background: ...
}

Hinweis: Wenn Sie möchten, dass es über dem übergeordneten Div liegt, verwenden Sie stattdessen div::after.

8
ArcTanH

Sie erwähnen, dass Sie bereits ein Hintergrundbild auf body haben.

Sie haben könnte dieses Hintergrundbild auf html und das neue auf body setzen. Dies hängt natürlich von Ihrem Layout ab, aber Sie brauchen dafür nicht die Fußzeile.

4
stephenhay

Mit einem Cover in Hintergrundgröße arbeitete ich für mich.

#footer {
    background-color: #eee;
    background-image: url(images/bodybgbottomleft.png);
    background-repeat: no-repeat;
    background-size: cover;
    clear: both;
    width: 100%;
    margin: 0;
    padding: 30px 0 0;
}

Offensichtlich sollten Sie auf Supportprobleme achten. Aktivieren Sie die Option Kann ich verwenden: http://caniuse.com/#search=background-size

4
PanPipes

Dies könnte helfen . Die Fußzeilenhöhe muss eine feste Zahl sein. Grundsätzlich haben Sie ein div innerhalb der Fußzeile div mit seinem normalen Inhalt, mit position: absolute, und dann das Bild mit position: relative, einem negativen z-index, damit es "unter" allem bleibt, und einem negativen top-Wert der Fußhöhe minus der Bildhöhe ( in meinem Beispiel 50px - 600px = -550px). Getestet in Chrome 8, FireFox 3.6 und IE 9.

2
cambraca

Nicht wirklich - das Hintergrundbild ist an das Element gebunden, auf das es angewendet wird, und die Überlaufeigenschaften gelten nur für den Inhalt (d. H. Markup) innerhalb eines Elements. 

Sie können ein weiteres div in Ihre Fußzeile div einfügen und das Hintergrundbild darauf anwenden und stattdessen diesen Überlauf haben.

2
hollsk

Verwenden Sie die transform: scale (1.1) -Eigenschaft, um das bg-Bild zu vergrößern und mit der Position nach oben zu verschieben: relativ; oben: -10px;

<div class="home-hero">
    <div class="home-hero__img"></div>
</div>

.home-hero__img{
 position:relative;
    top:-10px;
    transform: scale(1.1);
    background: {
        size: contain;
        image: url('image.svg');
    }
}
1
Pavlo Kozachuk