Redimention d'image en fonction de la résolution.[Résolu]

Bonjour,

Je travail sur un site web, et plus précisément un forum, mais je rencontre un petit problème au niveau de mon header, qui ne se redimensionne pas automatiquement en fonction de la résolution de l'utilisateur. L'image est tronqué.
Voyez:
http://geoffreytest.perso.sfr.fr/forum/
Je fais des tests en local pour essayer de changer ça, couper l'image en trois ou des choses comme ça... mais j'avoue que je galère et ne trouve pas vraiment de solutions à mon problème en ligne.
Donc avez vous des solutions à me proposer (présenter l'image différemment? je pensais à ce qu'une partie de l'image au centre, se multiplie en fonction de la taille de l'écran, et laisser les image de droite et gauche fixe).
Je vous présente quand même le code css du header actuel :

#header{
	background: rgba(0,0,0, 0.0) url(../images/header.png) top center; 
	position:absolute;
	width: 100%;
	height: 72%;
	top: 0%;
	z-index: 2;	
}

Je remercie d'avance ceux qui m'aideront ^^, car la je pète légèrement un câble sur ce problème...

Chuss.
Modifié par Larnak (17 Oct 2011 - 19:17)

Salut,

Peut-être que la propriété CSS 3 background-size répondra à ton besoin (on en parle dans ce tutoriel).

Merci, je vais tester ça voir ce que cela donne.

J'ai tenté plusieurs essais avec les propriétés background-size, mais rien ne change... Ou alors je m'en sers mal.

Bon, j'ai trouvé une solution en JS (et JQuery), je vous partage ce que j'ai trouvé sur le web :

	$(document).ready(function()
	{
		$('body').prepend('<div style="position:absolute;top:0;left:0;width:100%;height: 72%;overflow:hidden;z-index:2;"> 	<img id="bg" src="images/header.png" style=""> </div>');
		
		resizeImage();
		$(window).bind('resize', function()
		{
			resizeImage();
		});
	}
	);
	
	function resizeImage()
	{
		var windowW = $(window).width();
		
		$("#bg").width(windowW);
	}

Avec ca mon header prend la bonne taille, c'est génial !! ^^.

Merci à vous quand meme.