[css] Une image d'arrière-plan peut-elle être plus grande que la div elle-même?



Answers

Il y a un truc très facile. Définir le remplissage de cette div à un nombre positif et une marge à négative

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

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

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

L'image est d'environ 800x600px, et je veux qu'elle soit positionnée dans le coin inférieur gauche du pied de page. Cela devrait fonctionner comme une image de fond pour mon site Web, mais j'ai déjà mis une image de fond sur mon corps. J'ai besoin d'une autre image positionnée dans le coin en bas à gauche de mon site web et le #footer div serait parfait pour ça.

#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 de la div. Est-il possible de faire cela?

overflow:visible ne fait pas le travail!




Utilisation de la couverture de taille de fond a travaillé 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, cochez la case Puis-je utiliser: http://caniuse.com/#search=background-size




Non, tu ne peux pas.

Mais comme une solution de contournement solide, je suggérerais de classer cette première div en 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 initiale.

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

div {
  position: relative;
}    

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

Note: si vous voulez qu'il soit 'en haut' de la div parente, utilisez div::after place.




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




Related