• Image en background

    Une question m'est posée, concernant l'affichage de certaines images, placées en fond (background).

    Le code proposé est au rapport largeur/hauteur 16/9 et les images sont de rapports différents.

    La demande étant particulière, je vais utiliser des unités fixes, les pixels: px.

    L'adresse de l'image, copiée chez Nathie13or, mesure 450x315px.

    Supposons un cadre à remplir de 600x450px, avec arrondi de 50%: voici différentes propositions:

    Pour être plus clair, j'écris les différents attributs (positionnement, taille, répétition) en complet mais vous trouverez, en 2 ème exemple, une écriture réduite.

     

    <p style="float:left; width: 600px; height: 450px; border: 0.1vh solid grey; border-radius:50%; margin: 2vh auto; background:url('http://ekladata.com/nuxw60HlxZYZCvl_AJZKGTsebGk@450x315.jpg'); background-position:center center; ">
    &nbsp;
    </p>


     

     <p style="float: left; width: 600px; height: 450px; border: 0.1vh solid grey; border-radius: 50%; margin: 2vh auto; background: url('http://ekladata.com/nuxw60HlxZYZCvl_AJZKGTsebGk@450x315.jpg') no-repeat center center, url('http://ekladata.com/a_8KslWkYma9nL24Ve6-Zg8Ntuw/img861.jpg');">&nbsp;</p>

    Ecriture différente qui permet de placer 2 images (ou +) en fond, en les positonnant.
    Chaque adresse (url) est suivie de la non-répétition et de son positionnement (center center).
    La texture de fond est écrite à la suite, après une virgule
    et sans attribut, pour qu'elle remplisse le cadre.


     

    <p style="float:left; width: 600px; height: 450px; border: 0.1vh solid grey; border-radius:50%; margin: 2vh auto; background:url('http://ekladata.com/nuxw60HlxZYZCvl_AJZKGTsebGk@450x315.jpg'); background-position:center center; background-repeat:no-repeat; background-size:cover;">
    &nbsp;
    </p>


     

    <p style="float:left; width: 600px; height: 450px; border: 0.1vh solid grey; border-radius:50%; margin: 2vh auto; background:url('http://ekladata.com/nuxw60HlxZYZCvl_AJZKGTsebGk@450x315.jpg'); background-position:center center; background-repeat:no-repeat; background-size:620px 470px;">
    &nbsp;
    </p>


     

     <p style="float: left; width: 600px; height: 450px; border: 0.1vh solid grey; border-radius: 50%; margin: 2vh auto; background: url('http://ekladata.com/nuxw60HlxZYZCvl_AJZKGTsebGk@450x315.jpg'); background-position: 10% center; background-repeat: no-repeat; background-size: 800px 600px;">&nbsp;</p>


    L'attribut background:url('http:/:...jpg'); permet de placer une image en fond.

    L'attribut background-position:10% center; permet de positionner l'image dans le cadre, de façon à afficher la partie qui vous intéresse.

    L'attribut background-repeat: no-repeat; permet de ne pas (dans ce cas) répéter l'image pour remplir le cadre.

    L'attribut background-size:800px 600px; permet de dimensionner l'image en fond.

    D'autres cas de figures peuvent être envisagés mais arrêtons-nous là, pour cette page !