Il te faut « forcer » l'image de fond à couvrir la surface disponible avec la déclaration background-size:cover. Si tu veux positionner cet élément en haut à droite de son conteneur alors joue avec les propriété right et top. Cela devrait le faire !
Principe de base pour créer un élément positionné
J'appelle ces "côtés" : points de positionnements. Code CSS : bottom : 10em; right : 10em; /*ou*/ top : 10px; left : 10px; Le point de positionnement gauche est spécifié avec la propriété CSS left .
Code CSS :
Dans ce cas, il vous suffit simplement de modifier la position initiale de l'image à 50% du côté gauche de son conteneur et d'ajouter une transformation de -50% sur l'axe horizontal (X) de l'image.
Éléments de type ligneModifier
</div> , où valeur est left (gauche), right (droite), center (centré) ou justify (justifié); pour une image : pour aligner à droite : <div style="text-align: right;padding-right: 10px">…
Pour remonter l'image depuis sa position d'origine, nous utilisons position:relative, puis left:200px, ce qui décale l'image de 200 pixels vers la droite, puis top:-85px, ce qui remonte l'image au même niveau que le titre.
HTML 4.0 - Positionner des éléments
Il est possible grâce aux feuilles de style de positionner au pixel près du texte ou des images grâce aux balises <SPAN> et <DIV>.
La balise HTML qui vous permettra d'insérer une image est la suivante : <img/> . Malgré le fait qu'elle peut contenir un large panel d'attributs, le seul et unique essentiel à son fonctionnement est l'attribut src . Cet attribut va vous permettre d'indiquer le chemin (absolu ou relatif) de votre image.
Pour insérer une image en HTML, il faut utiliser la balise < img > et préciser la source du fichier image avec l'attribut « src ». Le code HTML est le suivant : < img src="URL source" >. D'autres attributs, comme « alt », permettent de paramétrer de manière avancée l'affichage de l'image sur la page web.
Aligner une image à gauche du texte
Mais en indiquant un float:left dans la classe flotte déclarée dans le paragraphe contenant l'image, celle-ci va dégager un espace libre sur sa droite (puisqu'elle flotte à gauche) où le texte pourra se placer.
En CSS vous redimensionnerez une image en définissant une valeur aux propriétés CSS « width » et « height » qui représentent respectivement la largeur et la hauteur de l'image. L'utilisation de ces propriétés CSS est simple, il vous suffira de leur appliquer une valeur numérique suivie d'une unité comme le pixel (px).
Pour centrer une image en HTML vous devez :
display: block; permet de commencer sur une nouvelle ligne et d'occuper toute sa largeur. margin-left: auto; et margin-right: auto; permettent de centrer l'image.
L'élément est positionné dans le flux normal du document puis décalé, par rapport à lui-même, selon les valeurs fournies par top , right , bottom et left . Le décalage n'a pas d'impact sur la position des éléments. Aussi, l'espace fourni à l'élément sur la page est le même que celui fourni avec static .
La propriété de Position CSS position permet de spécifier si un élément est positionné ou pas et spécifie par la même occasion son type de positionnement pour déterminer algorithme utilisé pour calculer sa position. Seul un élément positionné interprète les feuilles de styles de position left , top , right et bottom .
Un rapide résumé de l'utilité de position:absolute
Comme son nom l'indique. En un peu plus clair, on peut positionner un élément, un <div> par exemple, à un nombre de pixel défini. Cette classe CSS sert à positionner, en absolu donc, un élément à dix pixels du haut et à dix pixels à droite.
La position absolue et la position fixe permettent de placer une boîte par rapport aux limites de la zone d'affichage ou du conteneur.
Attribuer une position : relative à un élément va positionner l'élément dans le flux normal de la page tout comme la valeur static de la propriété position : static .
Contextes de positionnement
Ce bloc englobant initial a les dimensions de la zone d'affichage (viewport) et est aussi le bloc qui contient l'élément <html> . Autrement dit, l'élément positionné de façon absolue sera affiché en dehors de l'élément <html> et positionné relativement à la zone d'affichage.
Il faut donc faire apparaitre l'image dans la structure HTML à l'aide de la balise <img> dûment renseignée avec l'attribut alt correspondant, pour en donner un équivalent textuel.
Il est possible aussi de centrer sans s'occuper de la propriété display : utiliser la position: absolute . Avec cette position, top et left placent l'élément à 50% du haut de leur parent, et 50% à gauche.
Il existe plusieurs propriétés CSS 3, pour positionner vos blocs. Le positionnement d'un bloc par défaut, vous utilisez la balise position static, avec cette valeur le bloc ne peut pas être positionné, repositionner et sa visibilité ne peut pas être modifiée. En position static il est statique.
La première méthode consiste à l'utiliser dans une cellule de tableau afin de positionner verticalement le texte : verticalement au centre de la cellule : middle en langage CSS. le “ plaquer ” en haut de la cellule : top en langage CSS.