web-dev-qa-db-fra.com

Positionnement multiple des images de fond

J'ai trois images de fond, toutes de largeur 643 pixels. Je veux qu'ils soient comme suit:

  • image du haut (12px height) no-repeat

  • image du milieu repeat-y

  • image du bas (hauteur 12px) non répété

Je ne peux pas sembler le faire sans les faire se chevaucher (ce qui pose un problème car les images sont partiellement transparentes), est-ce possible?

background-image:    url(top.png),
                     url(bottom.png),
                     url(middle.png);

background-repeat:   no-repeat,
                     no-repeat,
                     repeat-y;

background-position: left 0 top -12px,
                     left 0 bottom -12px,
                     left 0 top 0;
csscss3backgroundbackground-imagebackground-position
34
Juddling

Votre problème est que le repeat-y remplira toute la hauteur, peu importe où vous le positionnez au départ. Ainsi, il chevauche votre haut et votre bas.

Une solution consiste à insérer l’arrière-plan qui se répète dans un pseudo-élément placé hors du conteneur par le 12px en haut et en bas. Le résultat peut être vu ici (l'opacité dans la démo est juste pour montrer qu'il n'y a pas de chevauchement). Sans opacité, voir ici . Le code approprié (testé dans les navigateurs CSS3: IE9, FF, Chrome):

CSS

div {
    position: relative;
    z-index: 2;
    background: url(top.png) top left no-repeat, 
                url(bottom.png) bottom left no-repeat;
}

div:before {
    content: '';
    position: absolute;
    z-index: -1; /* Push it to the background */
    top: 12px; /* position it off the top background */
    right: 0;
    bottom: 12px; /* position it off the bottom background */
    left: 0;
    background: url(middle.png) top left repeat-y;
}

Si vous aviez besoin ou souhaitiez une prise en charge d'IE8 (qui ne prend pas en charge plusieurs arrière-plans), vous pouvez alors placer l'arrière-plan supérieur dans la division principale et insérer l'arrière-plan inférieur en utilisant le pseudo-élément div:after situé au bas du conteneur.

48
ScottS

Si vous pouvez ajouter au bloc des marges intérieures/égales égales aux arrière-plans que vous souhaitez positionner sans superposer d’autres blocs, vous pouvez utiliser le background-clip & background-Origin pour positionner les arrière-plans supérieur et inférieur sur les arrière-plans et les bordures répétées, ainsi que le fond répété./paddings + contenu.

Voici un exemple: http://dabblet.com/Gist/2668803

Pour votre code, vous devrez éventuellement ajouter quelque chose comme ceci:

padding: 12px 0;
background-clip: padding-box, padding-box, content-box;
background-Origin: padding-box, padding-box, content-box;

ou 

border: solid transparent;
border-width: 12px 0;
background-clip: border-box, border-box, padding-box;
background-Origin: border-box, border-box, padding-box;

Et vous aurez ce dont vous avez besoin. Si vous ne pouvez pas obtenir les marges/bordures, le pseudo-élément tel que ScottS mentionné fonctionnerait parfaitement.

6
kizu

Essayez de le faire comme ça:

 background: url(PICTURE.png) left top no-repeat, url(PICTURE2.png) right bottom no-repeat, url(PICTURE3.jpg) left top no-repeat;
    }

EDIT: Était juste un exemple, mais voici le css avec votre css: 

background: url(top.png) left 0px top -12px no-repeat, url(middle.png) left 0px top 0px repeat-y, url(bottom.png) left 0px bottom -12px no-repeat;
        }
1
Patrick R

J'ai en fait trouvé une solution plus simple, car j'avais le même problème avec une navigation horizontale.

Plutôt que d'ajouter du code comme les autres réponses, il vous suffit de le lister différemment dans votre CSS. L'image centrale qui se répète doit être répertoriée en dernier, et non en premier ou en second.

Dans mon code, cela ressemble à ceci:

background-image: url(../images/leftNav.gif), url(../images/rightNav.gif), url(../images/centerNav.gif);
background-position: left, right, center;
background-repeat: no-repeat, no-repeat, repeat-x;
1
user2585434

La seule façon (pratique et non menaçante pour les cheveux) que je vois est de le faire en Javascript, lorsque la page est chargée et redimensionnée, avec une toile dimensionnée de manière à correspondre à la hauteur intérieure et aux 3 images: dessinez la première fois en haut, dessinez la seconde autant de fois que nécessaire pour recouvrir le reste de la toile et la 3e en bas de la toile. Positionnez la toile à 0,0 avec un z-index ridiculement négatif.

Je me suis essayé avec 3 images (643 x 12, 100 et 12) et bien sûr le premier problème que j'ai vu est que la 3ème image est dessinée sur une partie de la dernière itération de la 2ème image - à moins que vous n'ayez une fenêtre hauteur de exactement 12 + 12 + (p2.height * X), ​​vous aurez un certain chevauchement. Mais c'est prévu, non?

0
dda

Un moyen radical mais efficace de gérer cela, si:

  1. vous voulez appliquer des arrière-plans sans chevauchement à un ": avant"
  2. l'élément ": before" en tant que hauteur maximale connue
&:before {
    background: url('vertical-line.png') no-repeat 0px,
                url('vertical-line-repeat.png') no-repeat 140px,
                url('vertical-line-repeat.png') no-repeat 200px,
                url('vertical-line-repeat.png') no-repeat 260px,
                url('vertical-line-repeat.png') no-repeat 320px,
                url('vertical-line-repeat.png') no-repeat 380px,
                url('vertical-line-repeat.png') no-repeat 440px,
                url('vertical-line-repeat.png') no-repeat 500px,
                url('vertical-line-repeat.png') no-repeat 560px,
                url('vertical-line-repeat.png') no-repeat 620px,
                url('vertical-line-repeat.png') no-repeat 680px,
                url('vertical-line-repeat.png') no-repeat 740px;
}
0
Kevin Struillou

Voici une méthode qui utilise 3 div pour chacune des images Haut, Milieu et Bas transparentes à appliquer à votre page Web.

Le fond d'écran est facultatif.

Testé dans les navigateurs modernes et compatible IE8.

Cette méthode vous permet de traiter l’élément body comme il se doit, c’est-à-dire que le balisage de votre page Web ne nécessite pas que [ soit dans un élément wrapper ou contenant.

jsFiddle Exemple
jsFiddle Exemple avec remplissage centré

Étant donné que l'exemple ci-dessus utilise un contenu de substitution d'image sans transparence pour les images du haut et du bas, vous pouvez vérifier que le balisage fonctionne avec la transparence avec ce jsFiddle qui utilise des mini-icônes transparentes en mode de répétition ICI .

0
arttronics

utiliser background-position avec 2 arguments, doit écrire en écriture étendue backgroud-position-x et backgroud-position-y

background-position-x: left 0;
background-position-y: top -12px, bottom -12px, top 0;
0
WantToDo

Je pense que z-index résoudra ce problème car z-index n'affecte que les éléments CHILD, ce qui signifie que vous ne pouvez rien gâcher sur la page utilisant z-index.

images du haut et du bas z-index:3;

image du milieu z-index:2;background-repeat:repeat-y;

0
jay