28220 sujets

CSS et mise en forme, CSS3

[Résolu] Image de fond 100% et positionnement contenu CSS

Bonjour,

Voilà, j'ai un souci.
Je souhaite faire une page html avec une image de fond qui s'adapte à la taille de la fenêtre et sur cette image de fond je souhaite positionner des DIV contenent du texte ou image.

Je rencontre 3 problèmes :
- le premier est que je n'ai pas trouvé d'autres solutions qu'un flash étirable pour faire office d'image de fond.
- le second est que du fait de l'utilisation de ce flash je ne sais pas quel DOCTYPE je dois utiliser.
- enfin et ce n'est pas le moindre. Ma page s'affiche et se comporte à peu près correctement sur PC sous IE 6 et Firefox 1.02 mais alors sous Opéra 7.54 je ne vois que le flash de fond. Et le pire c'est que sur Mac, Safari affiche correctement la page mais dès qu'on essaye de cliquer sur un lien, tous les contenus disparaissent sauf le flash. Quand à IE sous Mac l'ensemble de la page est complètement décalé et on ne voit quasiment rien de la page.

Quelqu'un pourrait-il m'aider ?

D'avance merci pour votre aide.
Modifié par Yapourha (11 Apr 2005 - 20:39)
Salut,

As-tu essayé en mettant dans le contenu de la page une imageavec les css suivantes :

#monFond
{
  position : absolute;
  top : 0;
  left : 0;
  width : 100%;
  height : 100%;
  z-index : 1;
}
#wrapper
{
  z-index : 2;
}

pour mettre l'image sous le contenu, l'ensemble du contenu étant dans #wrapper.

NB : 1) Non testé 2) Le height s'appliquant logiquement ici au document, tu prends le risque que ton image soit déformée.
Merci pour la réponse, oui je m'oriente vers cette solution.
En effet avant de voir ta réponse je suis tombée sur ce billet qui je pense revient à ce que tu proposes.

http://blog.alsacreations.com/2004/05/21/8-faire-un-arriere-plan-etirable

Donc mon problème est en train de se résoudre progressivement.
Il ne restera plus qu'a tester l'ensemble sous PC et Mac, etc.

Je vous tiens au courant pour la suite.
encore Merci ! Smiley biggrin
Modifié par Yapourha (11 Apr 2005 - 20:27)
Alors voilà le résultat.

Le code suivant trouvé sur le billet de Raphaël est tout à fait approprié pour faire une image de fond qui s'étire en fonction de la taille de la page.


<style type="text/css">
<!--
html, body {
margin:0;
padding:0;
height: 100%;
width: 100%;
}
#arriere{
/* l'image occupe toute la place du body */
width : 100%;
height: 100%;
}
-->
</style>

Le code HTML :

<img id="arriere" alt="" src="araignees.jpg" />


J'ai testé ma page sur PC sous IE IE 6, Firefox 1.02 et Opéra 7.54 et cela fonctionne. Sur Mac Mozilla, Safari et Opera 6.03 fonctionnent. Seul IE 5.2 sous Mac rencontre un problème, il semble que l'image de fond arrive au dessus de certains éléments de la page.

Ce n'est qu'un question de temps maintenant.
Voilà, je vais pouvoir mettre un "Résolu" dans le titre du topic !

Merci ! Smiley biggrin
Sujet clos
Aller à