Sujet Précédent Sujet Suivant

Comment mettre un diaporama en image de fond avec HTML et CSS ?

Résolu/Fermé
muramasakatana Messages postés 36 Date d'inscription samedi 12 novembre 2016 Statut Membre Dernière intervention 7 juillet 2019 - 2 juil. 2017 à 10:23
muramasakatana Messages postés 36 Date d'inscription samedi 12 novembre 2016 Statut Membre Dernière intervention 7 juillet 2019 - 5 juil. 2017 à 10:12
Bonjour, Bonsoir. Je cherche a mettre un diaporama image de fond et la barre horizontal du menu par dessus en mi-transparant. Si il y a un moyen juste avec l'HTML et le CSS j'aimerais bien le connaitre et si javascript oblige, j'aimerais savoir aussi... Merci.

je sais créer une animation donc pas besoin du code entier, juste : d'ou commencer ?
A voir également:

1 réponse

Réponse 1 / 1
RAD ZONE Messages postés 5224 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 22 mars 2024 1 353
3 juil. 2017 à 12:13
Salut
en voila un tout en css!

tu met un reset css (meyer par exemple ) c est plus simple pour les marges et la liste mais n oublie pas de mettre du css pour styler tes balises ensuite ! , puis tu adapte la fin du css .diaporama li span a ton anim
je te conseille de mettre des images d environs 1024px/860px optimisees !
ensuite tu met ton menu dans la div menu

j ai mis une animation dans le code pour ceux qui viendraient sur ce post et ne sauraient pas le faire ! 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>
      Fullscreen Background Image diaporama CSS3
    </title>
    <style type="text/css">
    /* http://meyerweb.com/eric/tools/css/reset/
        v2.0 | 20110126
        License: none (public domain)
        */
    html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}
    article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
    body{line-height:1}
    ol,ul{list-style:none}
    blockquote,q{quotes:none}
    blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}
    table{border-collapse:collapse;border-spacing:0}
      /* FIN reset */

        /* DEBUT CSS diaporama */
    .diaporama, .diaporama:after {
      position: fixed;
      width: 100%;
      height: 100%;
      top: 0px;
      left: 0px;
      z-index: 0;
    }

    .diaporama li span {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0px;
      left: 0px;
      color: transparent;
      background-size: cover;
      background-position: 50% 50%;
      background-repeat: none;
      opacity: 0;
      z-index: 0;
      -webkit-backface-visibility: hidden;
      -webkit-animation: imageAnimation 36s linear infinite 0s;
      -moz-animation: imageAnimation 36s linear infinite 0s;
      -o-animation: imageAnimation 36s linear infinite 0s;
      -ms-animation: imageAnimation 36s linear infinite 0s;
      animation: imageAnimation 36s linear infinite 0s;
    }

    .diaporama li:nth-child(1) span {
      background-image: url(images/1.jpg);
    }

    .diaporama li:nth-child(2) span {
      background-image: url(images/2.jpg);
      -webkit-animation-delay: 6s;
      -moz-animation-delay: 6s;
      -o-animation-delay: 6s;
      -ms-animation-delay: 6s;
      animation-delay: 6s;
    }

    .diaporama li:nth-child(3) span {
      background-image: url(images/3.jpg);
      -webkit-animation-delay: 12s;
      -moz-animation-delay: 12s;
      -o-animation-delay: 12s;
      -ms-animation-delay: 12s;
      animation-delay: 12s;
    }

    .diaporama li:nth-child(4) span {
      background-image: url(images/4.jpg);
      -webkit-animation-delay: 18s;
      -moz-animation-delay: 18s;
      -o-animation-delay: 18s;
      -ms-animation-delay: 18s;
      animation-delay: 18s;
    }

    .diaporama li:nth-child(5) span {
      background-image: url(images/5.jpg);
      -webkit-animation-delay: 24s;
      -moz-animation-delay: 24s;
      -o-animation-delay: 24s;
      -ms-animation-delay: 24s;
      animation-delay: 24s;
    }

    .diaporama li:nth-child(6) span {
      background-image: url(images/6.jpg);
      -webkit-animation-delay: 30s;
      -moz-animation-delay: 30s;
      -o-animation-delay: 30s;
      -ms-animation-delay: 30s;
      animation-delay: 30s;
    }

    /* Animation diaporama images */

    @-webkit-keyframes imageAnimation {
      0% {
        opacity: 0;
        -webkit-animation-timing-function: ease-in;
      }

      8% {
        opacity: 1;
        -webkit-animation-timing-function: ease-out;
      }

      17% {
        opacity: 1;
      }

      25% {
        opacity: 0;
      }

      100% {
        opacity: 0;
      }
    }

    @-moz-keyframes imageAnimation {
      0% {
        opacity: 0;
        -moz-animation-timing-function: ease-in;
      }

      8% {
        opacity: 1;
        -moz-animation-timing-function: ease-out;
      }

      17% {
        opacity: 1;
      }

      25% {
        opacity: 0;
      }

      100% {
        opacity: 0;
      }
    }

    @-o-keyframes imageAnimation {
      0% {
        opacity: 0;
        -o-animation-timing-function: ease-in;
      }

      8% {
        opacity: 1;
        -o-animation-timing-function: ease-out;
      }

      17% {
        opacity: 1;
      }

      25% {
        opacity: 0;
      }

      100% {
        opacity: 0;
      }
    }

    @-ms-keyframes imageAnimation {
      0% {
        opacity: 0;
        -ms-animation-timing-function: ease-in;
      }

      8% {
        opacity: 1;
        -ms-animation-timing-function: ease-out;
      }

      17% {
        opacity: 1;
      }

      25% {
        opacity: 0;
      }

      100% {
        opacity: 0;
      }
    }

    @keyframes imageAnimation {
      0% {
        opacity: 0;
        animation-timing-function: ease-in;
      }

      8% {
        opacity: 1;
        animation-timing-function: ease-out;
      }

      17% {
        opacity: 1;
      }

      25% {
        opacity: 0;
      }

      100% {
        opacity: 0;
      }
    }
         /* FIN CSS diaporama */

    .menu{
      width: 100%;
      background: #000;
      color: #FFF;
      z-index: 9999;
      position: relative;
      opacity: 0.5;
      text-align: center;
      height: 50px;
    }
    .menu p{
      padding:15px;
      font-size: 20px
    }
    </style>
  </head>
  <body>
    <div class="menu">
      <p>MENU</p>
    </div>
    <ul class="diaporama">
      <li>
        <span>Image 01</span>
      </li>
      <li>
        <span>Image 02</span>
      </li>
      <li>
        <span>Image 03</span>
      </li>
      <li>
        <span>Image 04</span>
      </li>
      <li>
        <span>Image 05</span>
      </li>
      <li>
        <span>Image 06</span>
      </li>
    </ul>
  </body>
</html>


a+
9
muramasakatana Messages postés 36 Date d'inscription samedi 12 novembre 2016 Statut Membre Dernière intervention 7 juillet 2019
Modifié le 4 juil. 2017 à 12:46
merci beauboup. c'est carrément ce que je cherchais. En revanche pour le reset on m'a dit que l'on pouvais le faire aussi comme ca : 



<code css>


  •  {margin: 0;    padding: 0;}


</code>

du coup c'est le quel le meilleur?
0
RAD ZONE Messages postés 5224 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 22 mars 2024 1 353 > muramasakatana Messages postés 36 Date d'inscription samedi 12 novembre 2016 Statut Membre Dernière intervention 7 juillet 2019
Modifié le 4 juil. 2017 à 17:28
Salut

je deconseille ce reset !
Le problème de cette technique, c'est qu'elle annule certains styles par défaut des navigateurs qui sont réellement utiles. Comme par exemple celui des éléments de formulaire !

soit tu utilise un reset (voila les liens Meyer ,Normalise ) ou tu peux aussi utiliser une feuille de style css de base comme KNACSS et ensuite de la meme maniere q'avec un reset tu met ta propre css! comme cela
 <link rel="stylesheet" href="css/knacss.css"><!-- ou ta css reset  -->  
  <link rel="stylesheet" href="css/ta-feuille-styles.css">

pour plus de details voir https://www.alsacreations.com/astuce/lire/36-reset-css.html

a+
0
muramasakatana Messages postés 36 Date d'inscription samedi 12 novembre 2016 Statut Membre Dernière intervention 7 juillet 2019 > RAD ZONE Messages postés 5224 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 22 mars 2024
5 juil. 2017 à 10:12
Ok merci encore
0

Discussions similaires

Une musique qui évoque le souvenir ?
fadilb -
Justbymeg -

5 réponses
Boucle sur la première diapositive d'une présentation
ND83 -
ndubau -

3 réponses
&nbsp ; Quelle Fonction ?
-Jeff- -
sl4ck -

14 réponses
Espace en HTML
baissaoui -
baissaoui -

0 réponse
Problème d'animation dans une présentation avec PowerPoint2016
saya2 -
saya2 -

6 réponses