CSS Images qui scrollent
Antoine
-
le hollandais volant Messages postés 4998 Date d'inscription Statut Membre Dernière intervention -
le hollandais volant Messages postés 4998 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
Je fais actuellement un thème wordpress pour un ami et il aimerais avoir des barres en haut et bas de l'écran pour que ca donne une impression de "cinéma". Donc j'ai fait ce qe j'ai pu avec des background-image mais le problème c'est que c'est en fond ( d'ou background d'ailleurs :p) et que j'aimerais faire la même chose mais qui soit par dessus au lieu d'être en fond :
Un lien du site et le code que j'ai utilisé pour faire les barres :
http://www.robertprevatt.com/index.php?i=robage
pour la barre du haut dans le css du body
background-image:url('http://www.robertprevatt.com/wp-content/themes/default/images/blacklong.png');
background-repeat:no-repeat;
background-position:50.1% 0%;
Background-attachment: fixed;
Du bas :
<div id="footer"
style="background-image:url('http://www.robertprevatt.com/wp-content/themes/default/images/black.png');
background-repeat:repeat-x;
background-position:0% 100%;
background-attachment: fixed;
>
Voila si vous avez des idées d'une autre manière de faire la chose, merci.
Je fais actuellement un thème wordpress pour un ami et il aimerais avoir des barres en haut et bas de l'écran pour que ca donne une impression de "cinéma". Donc j'ai fait ce qe j'ai pu avec des background-image mais le problème c'est que c'est en fond ( d'ou background d'ailleurs :p) et que j'aimerais faire la même chose mais qui soit par dessus au lieu d'être en fond :
Un lien du site et le code que j'ai utilisé pour faire les barres :
http://www.robertprevatt.com/index.php?i=robage
pour la barre du haut dans le css du body
background-image:url('http://www.robertprevatt.com/wp-content/themes/default/images/blacklong.png');
background-repeat:no-repeat;
background-position:50.1% 0%;
Background-attachment: fixed;
Du bas :
<div id="footer"
style="background-image:url('http://www.robertprevatt.com/wp-content/themes/default/images/black.png');
background-repeat:repeat-x;
background-position:0% 100%;
background-attachment: fixed;
>
Voila si vous avez des idées d'une autre manière de faire la chose, merci.
A voir également:
- CSS Images qui scrollent
- Des images - Guide
- Extraire images pdf - Guide
- Images enregistrées - Forum Bureautique
- Recherche images - Guide
- Ia qui crée des images - Accueil - Intelligence artificielle
1 réponse
salut :
background: url('http://www.robertprevatt.com/wp-content/themes/default/images/blacklong.png') no-repeat fixed 50% 0;
pour le haut
et
background: url('http://www.robertprevatt.com/wp-content/themes/default/images/black.png') no-repeat fixed 0% 100%;
Evidement que c'est en fond, puisque "Background" signifie arrière plan. Si tu veux faire un truc par dessus, faut faire un <div>. Voici un code pour le bas : il est positionné par dessus le body (z-index supérieur) il est en position absolute avec un décallage de 0 en bas et sur les cotés ainsi qu'un décallage de 96% depuis le haut, donc il ne prandra que 4% de l'écran en bas.
Il faut aussi dans le CSS du "body" mettre "z-index:10;" et "position:relative;".
background: url('http://www.robertprevatt.com/wp-content/themes/default/images/blacklong.png') no-repeat fixed 50% 0;
pour le haut
et
background: url('http://www.robertprevatt.com/wp-content/themes/default/images/black.png') no-repeat fixed 0% 100%;
Evidement que c'est en fond, puisque "Background" signifie arrière plan. Si tu veux faire un truc par dessus, faut faire un <div>. Voici un code pour le bas : il est positionné par dessus le body (z-index supérieur) il est en position absolute avec un décallage de 0 en bas et sur les cotés ainsi qu'un décallage de 96% depuis le haut, donc il ne prandra que 4% de l'écran en bas.
<div style="position: absolute; left: 0; bottom:0; top: 96%; right: 0; z-index:99; background-color: black;"></div>
Il faut aussi dans le CSS du "body" mettre "z-index:10;" et "position:relative;".