Décalage d'une image d'arrière-plan à droite à l'aide de CSS

Existe-t-il un moyen de positionner une image d'arrière-plan à un certain nombre de pixels à droite de son élément?

Par exemple, pour positionner quelque chose d'un certain nombre de pixels (disons, 10) à partir de la gauche , voici comment je procéderais:

#myElement {
    background-position: 10px 0;
}

J'ai trouvé cette fonctionnalité CSS3 utile:

/* to position the element 10px from the right */
background-position: right 10px top;

Pour autant que je sache, cela n'est pas pris en charge dans IE8. Dans le dernier Chrome / Firefox, cela fonctionne bien.

Voir Puis-je utiliser pour plus de détails sur les navigateurs pris en charge.

Source utilisée: http://tanalin.com/en/blog/2011/09/css3-background-position/

Mise à jour :

Cette fonctionnalité est désormais prise en charge dans tous les principaux navigateurs, y compris les navigateurs mobiles.

!! Réponse obsolète, car CSS3 a apporté cette fonctionnalité

Existe-t-il un moyen de positionner une image d'arrière-plan à un certain nombre de pixels à droite de son élément?

Nan.

Les solutions de contournement populaires incluent

• mettre un margin-rightsur l'élément à la place
• ajouter des pixels transparents à l'image elle-même et la positionner top right
• ou calculer la position à l'aide de jQuery une fois que la largeur de l'élément est connue.

La solution la plus simple consiste à utiliser des pourcentages. Ce n'est pas exactement la réponse que vous cherchiez depuis que vous avez demandé une précision en pixels, mais si vous avez juste besoin de quelque chose pour avoir un petit rembourrage entre le bord droit et l'image, donner quelque chose à 99% fonctionne généralement assez bien.

Code:

/* aligns image to the vertical center and horizontal right of its container with a small amount of padding between the right edge */
div.middleleft {
  background: url("/images/source.jpg") 99% center no-repeat;
}

Réponse obsolète: elle est désormais implémentée dans les principaux navigateurs, voir les autres réponses à cette question.

CSS3 a modifié la spécification de background-positionafin qu'il fonctionne avec un point d'origine différent. Malheureusement, je ne trouve aucune preuve qu'il est encore implémenté dans les principaux navigateurs.

http://www.w3.org/TR/css3-background/#the-background-position Voir l'exemple 12.

background-position: right 3em bottom 10px;

Comme proposé ici , c'est une jolie solution multi-navigateur qui fonctionne parfaitement:

background: url('/img.png') no-repeat right center;
border-right: 10px solid transparent;

Je l'ai utilisé car la fonctionnalité CSS3 de spécification des décalages proposés dans la réponse marquée comme résolvant la question n'est pas encore si bien prise en charge par les navigateurs. Par exemple

La réponse la plus appropriée est la nouvelle syntaxe à quatre valeurs pour la position d'arrière-plan, mais jusqu'à ce que tous les navigateurs la prennent en charge, votre meilleure approche est une combinaison de réponses antérieures dans l'ordre suivant:

background: url(image.png) no-repeat 97% center; /* default, Android, Sf < 6 */
background-position: -webkit-calc(100% - 10px) center; /* Sf 6 */
background-position: right 10px center; /* Cr 25+, FF 13+, IE 9+, Op 10.5+ */

Une astuce simple mais sale consiste à simplement ajouter le décalage souhaité à l'image que vous utilisez comme arrière-plan. ce n'est pas maintenable, mais cela fait le travail.

Cela fonctionnera sur la plupart des navigateurs modernes ... à part IE (support du navigateur) . Même si cette page répertorie> = IE9 comme prise en charge, mes tests n'étaient pas d'accord avec cela.

Vous pouvez utiliser la propriété calc () css3 comme ceci;

.class_name {
    background-position: calc(100% - 10px) 50%;
}

Pour moi, c'est le moyen le plus propre et le plus logique de réaliser une marge à droite. J'utilise également une solution de rechange border-right: 10px solid transparent;pour IE.

Ok si je comprends ce que vous demandez, vous feriez cela;

Vous avez votre conteneur DIV appelé #main-containeret .my-elementqui s'y trouve. Utilisez-le pour commencer;

#main-container { 
  position:relative;
}
/*To make the element absolute - floats above all else within the parent container do this.*/
.my-element {
  position:absolute;
  top:0;
  right:10px;
}

/*To make the element apart of elements, something tangible that affects the position of other elements on the same level within the parent then do this;*/
.my-element {
  float:right;
  margin-right:10px;
}

Soit dit en passant, il est préférable d'utiliser des classes si vous faites référence à un élément de niveau inférieur dans une page (je suppose que vous êtes donc mon changement de nom ci-dessus.

La spécification CSS3 autorisant différentes origines pour la position d'arrière-plan est maintenant prise en charge dans Firefox 14 mais toujours pas dans Chrome 21 (apparemment IE9 les prend en charge en partie, mais je ne l'ai pas testé moi-même)

En plus du problème Chrome référencé par @MattyF, il existe un résumé plus succinct ici: http://code.google.com/p/chromium/issues/detail?id=95085

Si vous avez des éléments proportionnés, vous pouvez utiliser:

.valid {
    background-position: 98% center;
}

.half .valid {
    background-position: 96% center;
}

Dans cet exemple, .validserait la classe avec l'image et .halfserait une ligne avec la moitié de la taille de celle standard.

Sale, mais fonctionne comme un charme et c'est raisonnablement gérable.

Si vous souhaitez l'utiliser pour ajouter des flèches / autres icônes à un bouton par exemple, vous pouvez utiliser des pseudo-éléments css?

Si c'est vraiment une image d'arrière-plan pour l'ensemble du bouton, j'ai tendance à incorporer l'espacement dans l'image, et à utiliser simplement

background-position: right 0;

Mais si je dois ajouter par exemple une flèche conçue à un bouton, j'ai tendance à avoir ce html:

<a href="[url]" class="read-more">Read more</a>

Et ont tendance à faire ce qui suit avec CSS:

.read-more{
    position: relative;
    padding: 6px 15px 6px 35px;//to create space on the right
    font-size: 13px;
    font-family: Arial;
}

.read-more:after{
    content: '';
    display: block;
    width: 10px;
    height: 15px;
    background-image: url('../images/btn-white-arrow-right.png');
    position: absolute;
    right: 12px;
    top: 10px;
}

En utilisant le sélecteur: after, j'ajoute un élément en CSS juste pour contenir cette petite icône. Vous pouvez faire de même en ajoutant simplement une étendue ou un <i>élément à l'intérieur de l'élément a. Mais je pense que c'est une façon plus propre d'ajouter des icônes aux boutons et qu'il est compatible avec tous les navigateurs.

vous pouvez consulter le violon ici: http://codepen.io/anon/pen/PNzYzZ

background-position: calc(100% - 8px);

utiliser le centre à droite comme position puis ajouter une bordure transparente pour la compenser?

Si vous avez un élément à largeur fixe et connaissez la largeur de votre image d'arrière-plan, vous pouvez simplement définir la position d'arrière-plan sur: la largeur de l'élément - la largeur de l'image - l'écart que vous voulez à droite.

Par exemple: avec un élément de 100 pixels de large et une image de 300 pixels de large, pour obtenir un écart de 10 pixels à droite, vous le définissez sur 100-300-10 = -210 px:

#myElement {
  background:url(my_image.jpg) no-repeat -210px top;
  width:100px;
}

Et vous obtenez les 80 pixels les plus à droite de votre image à gauche de votre élément, et un écart de 20 pixels à droite.

Je sais que ça peut sembler stupide mais parfois ça fait gagner du temps ... J'utilise ça beaucoup de manière verticale (écart en bas) pour les liens de navigation avec du texte en dessous de l'image.

Je ne sais pas si cela s'applique à votre cas.

mon problème était que j'avais besoin de l'image d'arrière-plan pour rester à la même distance de la bordure droite lorsque la fenêtre est redimensionnée, c'est-à-dire pour tablette / mobile, etc. Ma solution consiste à utiliser un percenatge comme ceci:

background-position: 98% 6px;

et il reste en place.

Oui! bien pour positionner une image d'arrière-plan comme si 0px du côté droit du navigateur au lieu de la gauche - j'utilise:

background-position: 100% 0px;