• IMG fond 2

    Ayant rédigé la page précédente, je voudrais revenir que les possibilités des 2 attributs:

    background-size: taille du fond, en l'occurrence de l'image de fond,

    background-position: position de l'image de fond.

    Je vous laisse faire des recherches pour en connaître les valeurs mais je vous propose quelques exemples d'utilisation.

    Background-size:

    cover; l'image va s'adapter à la taille du contenant; c'est à dire que si vous placez une image dans une vignette qui s'agrandit au survol, l'image sera toujours dans sa taille totale.

    100% 100%; Horizontal,Vertical; ou, en simplifié: 100%; même résultat de cover.

    60vw 33.75vw; l'image sera dimensionnée en adaptatif, selon l'écran de lecture; si le cadre est plus petit, vous n'afficherez que la partie haute/gauche.

    800px 450px; idem en unités fixes.

    D'autres valeurs sont possibles...

    Background-position:

    0% 0%; Horizontal/Vertical; valeur par défaut, l'image se placera dans le coin haut (H)/gauche(V).

    100% 0%; l'image se placera sur le côté droit du cadre de large et en haut; attention: le point de référence de l'image est son angle haut/gauche: il faut tenir compte de sa largeur dans son positionnement.

    0% 100%;  l'image se placera sur le côté gauche du cadre de large et en bas; idem.

    80vw 0vw; l'image se placera sur le côté droit du cadre de 80vw de large et en haut: idem.

    0vw 80vw; l'image se placera sur le côté gauche du cadre de 80vw de large et en bas: idem.

    Top left/bottom rigth ou des unités en pixels, donc fixes sont également acceptées.


    Voyons quelques exemples à survoler:

     

    <div id="xp1">&nbsp;</div>
    <style><!--
    #xp1{width:16vw; height:9vw; border:0.4vh ridge white; margin:1vh auto; background:url('http://ekladata.com/H-snMuiMvQqkYvIVmSt_9pSHwOk.jpg'); background-size:cover; transition:all 1s linear;}
    #xp1:hover{width:60vw; height:33.75vw;}
    </style>

     


    <div id="xp2">&nbsp;</div>
    <style><!--
    #xp2{width:16vw; height:9vw; border:0.4vh ridge white; margin:1vh auto; background:url('http://ekladata.com/aBlP0Y4GR8jANCDQwFLU5cv8r8M.jpg'); background-size:60vw 33.75vw; transition:all 1s linear;}
    #xp2:hover{width:60vw; height:33.75vw;}
    </style>


     

    <div id="xp3">&nbsp;</div>
    <style><!--
    #xp3{width:16vw; height:9vw; border:0.4vh ridge white; margin:1vh auto; background:url('http://ekladata.com/c03rTMdcAtvnVaYl24hLQADtCVI.jpg'); background-size:100%; background-position:50% 50%; transition:all 1s linear;}
    #xp3:hover{width:60vw; height:33.75vw; background-size:200%; background-position:60% 60%;}
    </style>

    Attention: si vous utilisez la valeur background-size:cover; au départ, le programme n'appliquera pas la transition sur l'animation, en passant de cover à 200%; il faut des unités semblables (100% --> 200%).