web-dev-qa-db-fra.com

Une image de fond peut-elle être plus grande que la div elle-même?

J'ai un pied de page div avec 100% de largeur. C'est environ 50px haut, en fonction de son contenu.

Est-il possible de donner à cette #footer une image d’arrière-plan qui déborde de ce div?

L'image mesure environ 800 x 600 pixels et je souhaite qu'elle soit positionnée dans le coin inférieur gauche du pied de page. Cela devrait fonctionner un peu comme une image d’arrière-plan pour mon site Web, mais j’ai déjà défini une image d’arrière-plan sur mon corps. J'ai besoin d'une autre image positionnée dans le coin inférieur gauche de mon site Web et la div #footer serait parfaite pour cela.

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

L'image est définie sur le pied de page, mais elle ne déborde pas du div. Est-il possible d'y arriver?

overflow:visible ne fait pas le travail!

cssimagebackground
65
matt

Je ne crois pas que vous puissiez faire déborder l'image d'une image d'arrière-plan. Les images placées dans les balises Image peuvent dépasser de leur div parent, mais les images d'arrière-plan sont limitées par la div pour laquelle elles sont l'arrière-plan.

41
Daniel Bingham

Il y a un truc très facile. Définit le rembourrage de cette div sur un nombre positif et la marge sur négative

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

Vous pouvez utiliser un élément css3 psuedo comme indiqué dans cet article.

http://www.exratione.com/2011/09/how-to-overflow-a-background-image-using-css3/

12
Josh Sells

Non, tu ne peux pas. 

Mais comme solution de contournement solide, je suggérerais de classer cette première division en position:relative et d’utiliser div::before pour créer un élément sous-jacent contenant votre image. Classé en tant que position:absolute, vous pouvez le déplacer n'importe où par rapport à votre div initiale. 

N'oubliez pas d'ajouter du contenu à ce nouvel élément. Voici quelques exemples:

div {
  position: relative;
}    

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

Remarque: si vous voulez qu'il soit "au-dessus" du div parent, utilisez plutôt div::after.

8
ArcTanH

Vous mentionnez déjà avoir une image de fond sur body.

Vous pouvez définir cette image d'arrière-plan sur html et la nouvelle sur body. Cela dépendra bien sûr de votre mise en page, mais vous n’auriez pas besoin d’utiliser votre pied de page pour cela.

4
stephenhay

Utiliser une couverture de taille de fond a fonctionné pour moi.

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

Évidemment, soyez conscient des problèmes de support, consultez Puis-je utiliser: http://caniuse.com/#search=background-size

4
PanPipes

Cela pourrait aider … .. Il faut que la hauteur du pied de page soit un nombre fixe. Fondamentalement, vous avez un div à l'intérieur du pied de page div avec son contenu normal, avec position: absolute, puis l'image avec position: relative, un z-index négatif pour qu'il reste "en dessous" de tout, et une valeur top négative de la hauteur du pied de page moins la hauteur de l'image ( dans mon exemple, 50px - 600px = -550px). Testé sous Chrome 8, FireFox 3.6 et IE 9.

2
cambraca

Pas vraiment - l'image d'arrière-plan est liée à l'élément auquel elle est appliquée et les propriétés de débordement s'appliquent uniquement au contenu (c'est-à-dire au balisage) d'un élément. 

Vous pouvez ajouter une autre div à votre div de pied de page et y appliquer l’image d’arrière-plan, ce qui entraînera un débordement.

2
hollsk

Utilisez la propriété transform: scale (1.1) pour agrandir l’image bg, déplacez-la vers le haut avec position: relative; en haut: -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