web-dev-qa-db-fra.com

L'image d'arrière-plan peut-elle s'étendre au-delà des frontières div?

L'image d'arrière-plan peut-elle s'étendre au-delà des frontières de div? Le débordement: visible s'applique-t-il à cela?

cssimagehtml
34
Yarin

Non, un arrière-plan ne peut pas dépasser le bord d'un élément.

Le style overflow contrôle la façon dont l'élément réagit lorsque le contenu est supérieur à la taille spécifiée de l'élément.

Cependant, un élément flottant à l'intérieur de div peut s'étendre à l'extérieur de div, et cet élément peut avoir un arrière-plan. L'utilité de cela est cependant limitée, car IE7 et versions antérieures ont un bogue qui provoque la croissance de div au lieu de laisser l'élément flottant s'afficher à l'extérieur.

25
Guffa

Suite aux conseils de kijin , j'aimerais partager ma solution pour les décalages d'image:

/** 
  * Only effective cross-browser method to offset image out of bounds of container AFAIK, 
  * is to set as background image on div and apply matching margin/padding offsets:
  */

#logo {
  margin:-50px auto 0 auto;
  padding:50px 0 0 0;
  width:200px;
  height:200px;
  background:url(../images/logo.png) no-repeat;
}

J'ai utilisé cet exemple sur un élément div simple <div id="logo"></div> pour positionner mon logo avec un -50px décalage vertical. (Notez que les paramètres de marge/remplissage combinés garantissent que vous ne rencontrez pas de problèmes de marge réduite.)

23
Yarin

impossible de définir une image d'arrière-plan "en dehors" de son élément,

MAIS VOUS POUVEZ FAIRE ce que vous voulez en utilisant l'élément 'PSEUDO' et faites-en la taille que vous voulez et placez-la où vous voulez. voir ici: j'ai mis la flèche en dehors de la portée enter image description here

voici le code

HTML: 

<div class="tooltip">
<input class="cf_inputbox required" maxlength="150" size="30" title id="text_13" name="name" type="text"><span class="msg">dasdasda</span>
</div>

texte fort 

 .tooltip{position:relative; float:left;}
    .tooltip .msg {font-size:12px;
        background-color:#fff9ea;
        border:2px #e1ca82 solid;
        border-radius:5px;
        background-position:left;
        position:absolute;
        padding:4px 5px 4px 10px;
        top:0%; left:104%;
        z-index:9000; position:absolute; max-width:250px;clear:both;
    min-width:150px;}


    .tooltip .msg:before {
        background:url(tool_tip.png);
        background-repeat:no-repeat;
    content: " ";
        display: block;
        height: 20px;
        position: absolute;
        left:-10px; top:1px;
        width: 20px;
        z-index: -1;
        }

voir ici l'exemple: http://jsfiddle.net/568Zy/11/

9
fahd4007

Non, l'arrière-plan ne s'étendra pas au-delà des frontières. Mais vous pouvez étirer la bordure autant que vous le souhaitez en utilisant padding et quelques ajustements intelligents des marges et de la position négatives.

8
kijin

Je comprends que c'est vraiment très tard et je ne sais même pas si c'est la meilleure pratique mais j'ai trouvé un petit moyen de le faire avec mon pied de page. Ma dernière section avait une image de fond que je voulais déborder dans le pied de page et je l'ai corrigée avec quelques lignes de CSS. Ajout d'un peu de rembourrage à la section avec l'image d'arrière-plan.

footer{
 background-color: transparent!important;
 top: -50px;
 margin-bottom: -50px;
}
2
SleBluue

J'ai essayé d'utiliser des valeurs négatives pour background-position mais cela n'a pas fonctionné (au moins dans Firefox). Il n'y a pas vraiment de raison pour cela. Définissez simplement l'image d'arrière-plan sur l'un des éléments situés plus haut dans la hiérarchie.

0
Brad Mace