Sprites et positionnement background

Bonjour, bon je commence déjà par voir sur le forum que le sprite ne gère pas les repeat... ça répond déjà a une de mes questions.

Je voulais savoir si malgré cela, une image de fond en sprite peut être placée dans une div? En partie basse par exemple.

.content
      {
      width: 788px;
      min-height:73px;
      overflow:hidden;
      margin: 0 auto 0 auto;
      padding: 0 0;
      background-color:#FFF;
      background-image: url("./content/fond.png") (0 0??);
      background-position:bottom;}

C'est à dire avoir a la fois les attributs x y de positionnement dans l'image elle même, mais aussi gérer les positionnement dans la div?

Dite oui, ça m'arrangerait

D'avance merci pour vos réponses éclairées.

J'ai bien peur que ça ne soit toujours pas possible. Le positionnement du background te permet de dire où placer l'image dans ton bloc. L'astuce des sprites consiste à avoir des blocs dont la taille est fixe et connue, ce qui te permet justement de pouvoir placer une image derrière. Vois ça comment un trou dans un mur, à travers lequel tu regardes autre chose, derrière. Le trou dans le mur c'est ton bloc, et le fond c'est ton sprite. Si le trou est trop gros, tu verras forcément plusieurs images !

Peux tu donner l'html, le CSS et l'image, ainsi que ce que tu voudrais ?

1 - L'image
A l'origine mon image est celle là contenant deux fond.

http://aeroclub.dinan.free.fr/style/content/fond.png

le premier 0 0 longueur:788px
le deuxième 0 -788px

Le deuxième fond était censé être en repeat, mais j'ai d'autre petit fond non repeter à mettre à coté si jamais tu arrives à trouver une soluce pour positionner le background.



2 - Le CSS

voir premier poste
à l'origine j'avis tout réuni dans la propriété parent background, mais pour bien distinguer ce qui n'était pas compris avec firebug j'ai décomposer en background-image, color...

3 - Html
Je vois pas trop ce que je peux te filer. Actuellement je fais une refonte graphique légére du site. Je suppose que si je file l'adresse tu vas, sans doute de bonne fois, me filer des solutions qui n'iront pas pour la suite de ce que je souhaite faire.

le fond que je veux mettre en sprite est visible en bas de page faisant la transition avec le pied de page. l'autre bout de fond est celui répeter en bas des articles.

http://aeroclub.dinan.free.fr

youki a écrit :
C'est à dire avoir a la fois les attributs x y de positionnement dans l'image elle même, mais aussi gérer les positionnement dans la div?

Dite oui, ça m'arrangerait

Comme je suis pas arrangeant je vais dire non.
Tu ne peux pas avoir «à la fois» une sélection d'une zone de l'image de fond et le positionnement de la zone sélectionnée dans le fond de l'élément. Tout simplement parce que le principe de «sélection d'une zone de l'image» n'existe pas en CSS 2.1. La technique des sprites CSS consiste à faire comme si on pouvait, en trichant grâce à des éléments aux dimensions fixes (hum...) et au positionnement de l'image de fond avec background-position.

Donc oui, tu peux utiliser background-position pour placer ton image de fond. Mais non, tu ne peux pas demander au navigateur de n'afficher qu'une zone précise de l'image de fond (en CSS 2.1, du moins). Donc utiliser background-position ne suffira pas.

Il va falloir faire l'impasse sur les sprites CSS pour cette image. Ce n'est pas un bien grand problème, quand il y a d'autres optimisations peut-être plus urgentes, comme par exemple diviser par trois le poids de cette image (j'ai pas testé le reste du site, c'est juste la première chose que j'ai vérifiée ).

.content

      {width: 788px;

      min-height:73px;

      overflow:hidden;

      margin: 0 auto 0 auto;

      padding: 0 0;

      background-color:#FFF;

           position:relative;
}
.background{ position:absolute;width:100%;height: la taille; background:url( background-image: url("./content/fond.png") 0 0 repeat-x; bottom:0;}
.contenu{position:relative;width: 788px;}
 

et

<div class="content">
<div class="background"></div>
<div class="contenu">
</div>
</div>

Modifié par mlbcreation (27 Apr 2010 - 20:08)