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 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
<img src="{T_THEME_PATH}/images/image_fond.jpg" id="fond" alt="image" />
par 
Flux RSS
