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

77

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

Ist es möglich, dieser Fußzeile ein Hintergrundbild zu geben, das diese Div überläuft?

Das Bild ist ungefähr 800x600px groß und ich möchte, dass es in der linken unteren Ecke der Fußzeile positioniert wird. Es sollte wie ein Hintergrundbild für meine Website funktionieren, aber ich habe bereits ein Hintergrundbild auf meinem Körper festgelegt. Ich brauche ein weiteres Bild in der unteren linken Ecke meiner Website und das #footer div wäre perfekt dafür.

#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, es läuft jedoch nicht über das div. Ist es möglich, dies zu erreichen?

overflow:visible macht den Job nicht!

css image background matt
quelle

Antworten:

49

Ich glaube nicht, dass Sie ein Hintergrundbild über seine div laufen lassen können. In Bild-Tags platzierte Bilder können das übergeordnete Div überlaufen, Hintergrundbilder werden jedoch durch das Div begrenzt, für das sie der Hintergrund sind.

Daniel Bingham
quelle
157

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

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

Nein, das kannst du nicht.

Als solide Problemumgehung würde ich jedoch vorschlagen, dieses erste Div als zu klassifizieren position:relativeund div::beforeein zugrunde liegendes Element zu erstellen, das Ihr Bild enthält. Klassifiziert, da position:absoluteSie es relativ zu Ihrem ursprünglichen Div überall hin verschieben können.

Vergessen Sie nicht, diesem 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 div::afterstattdessen.

ArcTanH
quelle
5

Die Verwendung einer Abdeckung in Hintergrundgröße hat bei mir funktioniert.

#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;
}

Beachten Sie natürlich Support-Probleme. Aktivieren Sie die Option Kann ich verwenden: http://caniuse.com/#search=background-size

Panflöte
quelle
4

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

Sie können das Hintergrundbild aktivieren htmlund das neue aktivieren body. Dies hängt natürlich von Ihrem Layout ab, aber Sie müssten Ihre Fußzeile nicht dafür verwenden.

stephenhay
quelle
3

Verwenden Sie die Eigenschaft trasform: scale (1.1), um das Hintergrundbild zu vergrößern, und verschieben Sie es mit der Position: relative nach oben. 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');
    }
}
Pavlo Kozachuk
quelle
2

Nicht wirklich - das Hintergrundbild wird durch das Element begrenzt, auf das es angewendet wird, und die Überlaufeigenschaften gelten nur für den Inhalt (dh das Markup) innerhalb eines Elements.

Sie können Ihrem Fußzeilendiv ein weiteres Div hinzufügen und das Hintergrundbild darauf anwenden und stattdessen diesen Überlauf haben.

Hollsk
quelle
2

Das könnte helfen . Die Fußzeilenhöhe muss eine feste Zahl sein. Grundsätzlich haben Sie ein Div in der Fußzeile mit normalem Inhalt, position: absoluteund dann das Bild mit position: relativeeinem Negativ, z-indexdamit es "unter" allem bleibt, und einen negativen topWert für die Höhe der Fußzeile abzüglich der Bildhöhe (in meinem Beispiel) 50px - 600px = -550px). Getestet in Chrome 8, FireFox 3.6 und IE 9.

Cambraca
quelle