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

[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>


Avatar de l’utilisateur
cabot
Equipe site
Equipe site
 
Rédigé le: 10 Fév 2014 à 20:02
Articles: 18
Noter cet article: 123456 Votants: 7
Mots-clés: Image, background, taille, écran

Retourner vers Styles