Cours par Webcam

Cours par Webcam

Formateur Web pour adultes depuis plus 11 ans, je vous propose des COURS collectifs par WEBCAM en LIVE pour booster vos connaissances et être autonome dans la création de site.

En savoir plus

CSS - texte

CSS - police

CSS - arrière-plan

CSS - boîte

CSS - mise en page

CSS - liste

CSS - tableau

CSS - animation

CSS - pseudo-class

CSS - pseudo-élément

CSS - les sélecteurs

Facebook
Twitter
LinkedIn

attribut BACKGROUND-POSITION

Rôle

L’attribut background-position permet d’indiquer la position d’une image de fond d’un élément HTML.

Version : CSS1

Héritage (inherit) : non

Propriété Javascript : element.style.backgroundPosition

Testez vous-même cet attribut

Utilisez Codepen.

– Le code CSS

div{
  width: 400px;
  height: 200px;
  background-image: url(http://lorempixel.com/400/200/);
  border: thin silver solid;
  background-repeat: no-repeat;
  background-position: 30px 30px;
}

– Le code HTML

<div></div>

Résultat

Compatibilité

navigateur-chromenavigateur-firefoxnavigateur-ienavigateur-safarinavigateur-opera

L’attribut background-position est pris en charge par tous les principaux navigateurs

Valeurs

Le référentiel de l’image (le point 0) par défaut est situé en haut à gauche du bloc qui contient l’image de fond.

Les différentes valeurs de l’attribut background-position sont:

Valeur pour la position horizontale puis pour la position verticale :
Indiquer une valeur en pixel, en em…
Syntaxe :
background-position : 20px 30px
Valeur en % pour la position horizontale puis pour la position verticale :
Le point 100% 100% correspond au coin inférieur droit du bloc qui contient l’image de fond
Syntaxe :
background-position : 100% 100%
Exemple :
Utiliser des mots clés pour la position horizontale puis pour la position verticale :
Valeur possible : right, top, bottom, left, center.
Si une seule valeur est fournie, la deuxième sera center par défaut
Syntaxe :
background-image : left bottom
Exemple :
initial
La position est définie à sa valeur initiale (attention pas pris en charge par Internet Explorer et Opéra en dessous de la version 15). Peut être utilisé pour « neutraliser » une spécificité, par exemple un paragraphe peut ignorer la position d’une image de fond imposée par une feuille de style qui le cible.
Syntaxe :
background-position : initial
inherit
Hérite de la même propriété que l’élément parent.
Syntaxe :
background-position : inherit

A voir aussi

background– background-color– background-image– background-position– background-repeatbackground-size– background-origin– background-clip– background-attachment

A lire aussi

tutowebdesign

Afficher du contenu au scroll

Afficher du contenu au scroll Voici un effet impressionnant et pourtant très facile à mettre en place sur vos pages. Le principe consiste à faire

Lire »