Un background adapté à toute résolution?

Bonjour à tous,

Voici mon problème, je développe actuellement un site sous Xhtml et css (pas de Javascript ni php). J'ai rencontré 2 problèmes :

1) J'aimerais avoir un arrière plan avec une image (avec un motif symétrique qui donnera l'impression de sortir de sous le contenu de mon site) qui s'adapte à toutes les résolutions d'écran.

Pour cela j'insère donc un "<img src="monimage.jpg" width="100%" height="100%"> ... tout se passe bien mon image prend tout l'écran et le centre de l'image est bien au centre de l'écran, maintenant, il m'est impossible d'insérer par dessus cet arrière plan mon site avec ses différents bloc "div" etc...

Je voudrais donc savoir si cela est possible, si oui comment? :(


2) Est-il possible de faire en sorte qu'un bloc "div" ait à gauche et à un droite un motif (qui a priori ne fait pas partit de ce "div"), en faisant en sorte que ce motif soit soit toujours au niveau de centre la page (verticalement parlant)?

PS : pour vous illustrer un peu mes propos, voici ce que je voudrais réaliser...

Merci d'avance pour votre aide

Bonjour

Pas mal du tout ton motif, c'est très sympa !!

Pour la deuxième question, j'ai beaucoup eu de mal. Es ce que tu veux un background, qui reste fixe, même si tu fais défiler ta page ?

dans ce cas

tu mets ton image en background sur ta feuille de style dans body

Code:

---

1 2 3 4 5

body { background-repeat:none; background-image:url(monimage.jpg); background-attachment: fixed; }

---

voilà, c'est une solution

merci pour le motif, réalisé en secondes sous photoshop :P

En fait je veux que le motif soit toujours au centre de la page, donc si la page défile on retrouvera le motif au milieu de mon bloc, même si il faut descendre pour le voir...

En fait mon souci c'est surtout les résolutions d'écran, car je veux que cette image soit toujours affiché en plein écran, même si la résolution augmente, tou en gardant le motif au centre...

Le seul moyen que j'ai trouvé pour que l'image s'affiche toujours à 100% c'est de mettre dans mon html >img src="monimage.jpg" width="100%" height="100%">
Seulement en faisant ça je crois qu'on ne peut pas mettre par dessus l'image des <div>... :(

mets ton image en background ou bine va chercher du côté de z-index ...

j'ai déjà testé le z-index, mais peut-on utiliser le z-index directement dans le <img src...> ? en gros peut-on placer le z-index directement dans le html?

bonjour

Le z-index est applicable a n'importe quel element html positionné en : relative , absolute ou fixed .
position:static; , valeur par defaut, ne permet pas de modifé le z-index d'un element , qui reste a zero (ou 1 selon le navigateur) .

Il suffit bien souvent de tester une règle pour voir si les navigateurs l'acceptent.

GC

Bonsoir

Il y a un point que j'ai pas saisi : veux tu que l'image d'arrière plan soit toujours proportionnelle à la résolution de l'image ? C'est à dire que plus l'écran est large et plus l'image se déforme en s'élargissant ?

Si oui tu as utilisé la bonne méthode par le biais de la balise <img>. Pour que le site passe par dessus positionne cette image de manière absolue, voir encore mieux de manière fixe qui tu veux qu'elle reste apparente même si le site défile verticalement.

http://css.developpez.com/faq/?page=...ement_absolute
http://j-willette.developpez.com/tut...osition-fixed/