[3.0] Image de fond qui s'adapte à la taille d'écran
Rédigé le: 10 Fév 2014 à 19:02
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:
Ajouter AVANT:
Trouver:
Remplacer par:
- 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:
Ajouter AVANT:
Trouver:
Ajouter APRÈS:
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>