Le texte est le même : "Le texte est-il le même".

Question

J'ai un div de pied de page avec une largeur de 100%. Il fait environ 50px de hauteur, en fonction de son contenu.

Est-il possible de donner à ce #footer une image de fond qui dépasse un peu de ce div?

L'image fait environ 800x600px, et je veux qu'elle soit positionnée dans le coin inférieur gauche du pied de page. Elle devrait fonctionner un peu comme une image de fond pour mon site, mais j'ai déjà défini une image de fond sur le corps. J'ai besoin d'une autre image positionnée dans le coin inférieur gauche de mon site et le div #footer serait parfait 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 pour le pied de page, cependant elle ne dépasse pas le div. Est-il possible de le faire?

overflow:visible ne fonctionne pas!

Answer 1

Il y a un truc très simple. Définissez le padding de cette div à un nombre positif et la marge à un nombre négatif

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

Answer 2

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

Answer 3

Vous pouvez utiliser un pseudonyme css3 (:before et/ou :after) comme indiqué dans cet article

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

Bonne chance...

Answer 4

Non, tu ne peux pas.

Mais comme solution de contournement solide, je suggérerais de classer ce premier div comme position:relative et d'utiliser div::before pour créer un élément sous-jacent contenant votre image. Classé comme position:absolute, vous pouvez le déplacer n'importe où par rapport à votre div initial.

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

div {
  position: relative;
}    

div::before {
  content: ""; /* vide mais nécessaire */
  position: absolute;
  background: ...
}

Remarque : si vous voulez qu'il soit 'au-dessus' du div parent, utilisez div::after à la place.

Answer 5

Utiliser background-size cover 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 compatibilité, vérifiez Can I Use: http://caniuse.com/#search=background-size