Image background 100%

Version imprimable

31/08/2009, 14h17
Inkone

Image background 100%

Salut tous le monde !!
voila je suis un petit nouveau sur le forum mais aussi dans le développement.
je suis entrain de travailler sur un template joomla, et ma question est la suivante.
je souhaiterai mettre en fond d'écran une image style photo mais à 100% en fond, sans perdre homothétie. je sais que après on peu avoir des problème en fonction de la résolution de l'écran...
j'ai cherché sur le forum je n'ai pas trouvé grand chose à ce propos. quelqu'un conné un petit code pour pouvoir réaliser cela ?
je vous remercie tous.
Ink

image de fond redimensionnable

Salut,

Cela te convient-il?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>image de fond redimensionnable</title>
  <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
  <style type="text/css">
  * {margin:0;padding:0;}
  body {margin:10px;background:#000;color:#ddd;font-size:1em;font-family:Helvetica, Arial, sans-serif;}
  #fond {width:100%;position:absolute;top:0;left:0;z-index:-1;}
  </style>
</head>
<body>
  <div id="contenu">Ceci est un contenu quelconque.</div>
  <img id="fond" src="img/photo.jpeg" alt="" />
  <script type="text/javascript">
  <!--
    // code javascript
  //-->
  </script>
</body>
</html>

31/08/2009, 18h16
Inkone

merci beaucoup franculo_caoulene effectivement ton code fonctionne mise à part le fait que mon image ne s'adapte pas à la résolution des écran. est ce que çela proviens de l'image, ou du code...je ne sais pas trop.
quelqu'un aurait-il une astuce.
Je souhaiterai réaliser un template dans cette esprit : http://www.nathancarnes.com/media/172.jpg
où encore comme ce site, http://www.bellecour.fr/ qui lui vraisemblablement passe par du flash, ce que je ne souhaiterai pas apporter à mon site.
Merci à tous.
31/08/2009, 18h24
franculo_caoulene

Comment ça elle ne s'adapte pas à la résolution de ton écran? L'image a des proportions qu'elle doit garder, si elle ne veut pas être déformée.

edit : pourtant flash est peut-être la meilleure solution, en gardant le système d'un div en position absolue.
31/08/2009, 18h36
Inkone

mmhhh effectivement, c'est vrai que mes connaissance sont quelque peu limité, mais je ne pense pas que en passant par le css, ce soit impossible sans déformer l'image...je vais peut être me plancher sur le flash, mais c'est loin d'être gagner :).
Si je trouve quelque chose je le posterai ici, ça peu peut être intéresser quelqu'un.
Si quelqu'un aurai une piste en passant par flash je suis preneur.
Merci.
31/08/2009, 19h36
Inkone

bon je pense avoir trouvé la solution, ils faut simplement crée deux images, une pour le haut du bg ainsi qu'une seconde pour le bas, qui ce fondent grasse à un dégrade sur le milieu afin d'arrivé qua une seul couleur du genre #FFFFFF. on peux donc ensuite avoir un fond qui s'adapte à l'écran.
Merci à vous en tous cas.
31/08/2009, 19h44
franculo_caoulene

Méfie-toi tout de même des couleurs de fond, j'ai souvent eu des surprises entre les différents navigateurs. Bon après, blanc c'est blanc. Mais si tu essaies une teinte de bleu, tu risques d'avoir des surprises. Sauf si quelqu'un a la solution et là, c'est moi qui suis preneur.
01/09/2009, 09h46
Inkone

autre solution qui je pense cette fois est beaucoup plus propre. imaginons que tu veux un paysage. tu crée un premier bg avec le ciel, nuage etc...qui prend 100% de ton index, et tu viens superposer une seconde image en gif avec une découpe de genre des montagne, une ville qui représente la partie basse de ton bg. du coup tu na pas a passer par un dégradé mais par une superposition d'image un peu comme sous photoshop avec les calques...j'ai pas encore essayé, je posterai le résultat une fois fait.
01/09/2009, 10h08
franculo_caoulene

C'est une solution très souvent utilisée.