[Résolu] Positionnement d'une image en arrière plan

Bonjour,

Je désire placer une image (dans le cadre rouge) à droite d'un div(du cadre vert) en arrière plan.

http://img4.imageshack.us/img4/2204/24317283.png

Pour l'instant, j'ai un largeur fixe de 1000 px, j'aimerais la garder. Le cadre vert a une largeur fixe de 1000 px.

Première solution, j'ai appliqué au cadre bleu (le plus grand) une image en arrière plan, en la positionnement à droite et en bas ET en dehors des 1000px. Ça fonctionne bien pour ma résolution mais vu que le cadre bleu a une largeur de 100%, si on redimensionne le navigateur, l'image reste collée à droite du navigateur donc pas bon pour les grandes résolutions car il faut que l'image soit collée à la droite du cadre.

Deuxième solution, j'ai mis un cadre qui englobe mon cadre vert et mon cadre rouge. J'arrive à placer l'image, là où je désire et sans tenir compte de la résolution. Le problème c'est que ça implique que j'augmente ma taille fixe à 1400px donc pas terrible comme solution.

Donc voilà je ne connais pas d'autre technique pour placer mon imagine en arrière plan sans devoir augmenter la taille.

Je sais que j'ai pas été très clair, si y a besoin de plus d'image, n'hésitez pas à demander.

Merci d'avance pour votre aide.
Modifié par icl1c (03 Aug 2011 - 15:20)

Hello,
Donc si j'ai bien compris, ton site fait 1000px et tu souhaites afficher une image en dehors de ces 1000px et qui soit toujours collée à ton cadre vert?

Si c'est bien ça, essaie de créer une div à la fin de ton cadre vert (avant la fermeture de la div cadre), positionne cette div en absolute a right:0 et bottom:0 (il faut un position:relative sur ton cadre vert) et met ton image en fond. Ensuite ajoute une margin-left de la largeur de ta div.

A+

Salut, merci pour ta réponse.

Ça fonctionne, seulement pour les petites résolutions (inférieur à 1000px) j'ai la scrollbar horizontale qui apparait. Ce que je désire, c'est de ne pas avoir la scrollbar. Est-ce possible? où je dois me pencher du côté des media queries pour trouver une solution?

Tout dépend de ce que tu cibles:
- si mobile: media-queries à mon avis
- si très petit écran : regarde éventuellement du coté de overflow-x:hidden sur la balise html mais tu perds en accessibilté

Ok merci, la deuxième solution n'est pas envisageable. Je vais me pencher du côté de la première.

Je te remercie.