• Taille image de fond

    Placer une image en fond de paragraphe est bien pratique pour l'animer ensuite; cependant, il faut pouvoir adapter sa taille à celle de son contenant, le paragraphe.

    Je vais utiliser les unités adaptatives, pour que vos articles s'adaptent aux écrans de lecture; cependant, vous pouvez les transformer en unités fixes (px).

    Ma photo fait 1920x1080px; le paragraphe fait 50% des dimensions de votre écran; si je n'indique rien à mon image de fond, voici le résultat:

     

    La partie haut/droit (par défaut) de mon image a été reprise  mais le reste est masqué.

    <p style="width:50vw; height:67vh; margin:2vh auto; border:0.3vh solid white; background:url('http://ekladata.com/J1IJAYUFcYX5E1nbgttVd4Qu_JA.jpg');">&nbsp;</p>

    Reprenons ce code en indiquant la taille de l'image de fond:

    <p style="width:50vw; height:67vh; margin:2vh auto; border:0.3vh solid white; background:url('http://ekladata.com/J1IJAYUFcYX5E1nbgttVd4Qu_JA.jpg'); background-size:50vw 67vh;">&nbsp;</p>

     

    L'image s'affiche en totalité, selon les dimensions définies et quelles que soient ses dimensions au départ.