-
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');"> </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;"> </p>
L'image s'affiche en totalité, selon les dimensions définies et quelles que soient ses dimensions au départ.