[3.0] Image de fond qui s'adapte à la taille d'écran

Image de fond qui s'adapte à la taille d'écran

L'image placée en background s'adaptera à toutes les tailles/résolutions d'écrans, tout en gardant son ratio hauteur/largeur.

- Partie CSS
Ouvrir: common.css
Trouver:

Code: Tout sélectionner

/* Main blocks
---------------------------------------- */

Ajouter AVANT:

Code: Tout sélectionner

/* Background
---------------------------------------- */
#fond {
	position: fixed;
	top: 0;
	left: 0;
}
.largeur {
	width: 100%;
}
.hauteur {
	height: 100%;
}

Trouver:

Code: Tout sélectionner

#wrap {
	padding: 0 20px;
	min-width: 650px;
}

Remplacer par:

Code: Tout sélectionner

#wrap {
	position: relative;
	padding: 0 20px;
	min-width: 650px;
}

- Partie image
Placer une image nommée image_fond.jpg dans le dossier /styles/prosilver/theme/images/
Image utilisée pour le tuto

- Partie HTML
Ouvrir: overall_header.html
Trouver:

Code: Tout sélectionner

</head>

Ajouter AVANT:

Code: Tout sélectionner

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
// <![CDATA[
	$(function() {   
	
		var theWindow        = $(window),
			$bg              = $("#fond"),
			aspectRatio      = $bg.width() / $bg.height();
									
		function resizeBg() {
			
			if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
				$bg
					.removeClass()
					.addClass('hauteur');
			} else {
				$bg
					.removeClass()
					.addClass('largeur');
			}
						
		}
									
		theWindow.resize(function() {
			resizeBg();
		}).trigger("resize");
	
	});
// ]]>
</script>

Trouver:

Code: Tout sélectionner

<body id="phpbb" class="section-{SCRIPT_NAME} {S_CONTENT_DIRECTION}">

Ajouter APRÈS:

Code: Tout sélectionner

<div><img src="{T_THEME_PATH}/images/image_fond.jpg" id="fond" alt="image" /></div>