• Position du fond

    Terminant ma série Images/texte, dans laquelle je parle des positionnements des fonds, selon la position du sujet principal, je voudrais revenir sur ce point.

    Par défaut, une image placée en fond d'un cadre, prend pour origine le point haut/gauche de cette image; un attribut nous permet de choisir un positionnement particulier du fond dans ce cadre, ce qui est intéressant pour sélectionner le sujet principal, où qu'il se trouve dans l'image.

    Position du fond

    Voilà l'image que je viens d'héberger et je veux n'en conserver qu'une partie bien précise puis la faire s'afficher en entier, au survol de cette partie.

     

     

    <div style="width: 800px; height: 600px; border: 1px solid black; margin: 10px auto;">
    <p id="bkp">&nbsp;</p>
    </div>

    <style type="text/css"><!--
    #bkp{ position:absolute; width:80px; height:60px; transition:all 1s linear; transform:translate(520px,150px); background:url('http://ekladata.com/M8os3nLyuRDYRrkCr0K6S-2eTXs.jpg'); background-position:75% 28%;}
    #bkp:hover{width:800px; height:600px;transform:translate(0px,0px); background-position:0% 0%;}
    --></style>

     

     

    Nous avons sélectionné un petit élément de l'image mais nous pouvons en sélectionner une tranche, pour revenir aux pages image/texte.

     

     

     

    Vous retrouvez la sélection des montages image/texte, qui affiche une partie non centrée de l'image, ici sur la même image en fond et en noir et blanc, pour bien en montrer l'effet.

     

    <div style="width: 800px; height: 600px; border: 1px solid black; margin: 10px auto;">
    <p id="bkp0">&nbsp;</p>
    <p id="bkp1">&nbsp;</p>
    </div>
    <style type="text/css"><!--
    #bkp0{ position:absolute; width:800px; height:600px; transform:translate(0px,0px); background:url('http://ekladata.com/OTpm6vGYwW-OzMlGsmFajIqAjzc.jpg'); -webkit-filter:grayscale(1); filter:grayscale(1); opacity:0.5;}
    #bkp1{ position:absolute; width:150px; height:600px; transition:all 1s linear; transform:translate(520px,0px); background:url('http://ekladata.com/OTpm6vGYwW-OzMlGsmFajIqAjzc.jpg'); background-position:72% 0%;}
    #bkp1:hover{width:800px; height:600px;transform:translate(0px,0px); background-position:0% 0%;}
    --></style>
    ...