Positionner une image d'arrière-plan CSS x pixels à partir de la droite?

Je pense que la réponse est non, mais pouvez-vous positionner une image d'arrière-plan avec CSS, de sorte que ce soit une quantité fixe de pixels à droite?

Si je fixe des background-positionvaleurs de x et y, il semble que celles-ci ne donnent des ajustements de pixels fixes que de gauche et du haut respectivement.

background-position: right 30px center;

Cela fonctionne dans la plupart des navigateurs. Voir: http://caniuse.com/#feat=css-background-offsets pour la liste complète.

Plus d'informations: http://www.w3.org/TR/css3-background/#the-background-position

Il est possible d'utiliser l'attribut bordercomme longueur à partir de la droite

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

Il y a un moyen mais il n'est pas pris en charge sur tous les navigateurs (voir la couverture ici )

element {
  background-position : calc(100% - 10px) 0;
}

Cela fonctionne dans tous les navigateurs modernes , mais il est possible qu'IE9 plante . De plus, aucune couverture pour = <IE8.

Pour autant que je sache, la spécification CSS ne fournit pas exactement ce que vous demandez, en dehors des expressions CSS, bien sûr. En partant de l'hypothèse que vous ne voulez pas utiliser d'expressions ou de Javascript, je vois trois solutions de piratage:

• Assurez-vous que votre image d'arrière-plan correspond à la taille du conteneur (au moins en largeur) et définissez background-repeat: repeatou repeat-xsi seule la largeur est égalisée. Ensuite, faire en sorte que quelque chose apparaisse xpixels à droite est aussi simple quebackground-position: -5px 0px .
• L'utilisation de pourcentages pour les background-positionexpositions présente un comportement spécial qui est mieux vu que décrit ici. Donner un coup de feu. Essentiellement,background-position: 90% 50% le bord droit de l'image d'arrière-plan s'alignera à 10% du bord droit du conteneur.
• Créez un div contenant l'image. Définissez explicitement la position de l'élément conteneur position: relatives'il n'est pas déjà défini. Réglez le conteneur d'image sur position: absolute; right: 10px; top: 10px;, en ajustant évidemment les deux derniers comme bon vous semble. Placez le conteneur d'image div dans l'élément conteneur.

Essaye ça:

#myelement {
  background-position: 100% 50%;
  margin-right: 5px;
}

Notez cependant que le code ci-dessus déplacera l'élément entier (pas l'image d'arrière-plan uniquement) de 5 pixels à partir de la droite. Cela pourrait convenir à votre cas.

Vous pouvez le faire en CSS3:

background-position: right 20px bottom 20px;

Cela fonctionne dans Firefox, Chrome, IE9 +

Source: MDN

Solution de contournement d'image avec des pixels transparents à droite pour servir de marge droite.

La solution de contournement de l'image pour la même chose consiste à créer une image PNG ou GIF (formats de fichier d'image qui prennent en charge la transparence) qui a une partie transparente à droite de l'image exactement égale au nombre de pixels dont vous souhaitez donner une marge de droite ( ex: 5px, 10px, etc.)

Cela fonctionne bien de manière cohérente sur des largeurs fixes ainsi que des largeurs en pourcentages. Pratiquement une bonne solution pour les en-têtes d'accordéon ayant une image de flèche plus / moins ou haut / bas sur la droite de l'en-tête!

Inconvénient: Malheureusement, vous ne pouvez pas utiliser JPG à moins que la partie d'arrière-plan du conteneur et la couleur d'arrière-plan de l'image d'arrière-plan CSS soient de la même couleur plate (sans dégradé / vignette), principalement blanche / noire, etc.

S'il vous arrive de trébucher sur ce sujet dans ces jours de navigateurs modernes, vous pouvez utiliser une pseudo-classe: après pour faire quoi que ce soit avec le fond.

.container:after{
    content:"";
    position:absolute;
    right:20px;
    background:url(http://lorempixel.com/400/200) no-repeat right bottom;
}

ce css mettra l'arrière-plan dans le coin inférieur droit de l'élément ".container" avec un espace de 20 pixels sur le côté droit.

Voir ce violon par exemple http://jsfiddle.net/h6K9z/226/

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+ */

Il suffit de mettre le pixel padding dans l'image - ajoutez 10px ou autre à la taille de la toile de l'image dans Photoshop et alignez-la bien en CSS.

J'essayais de faire une tâche similaire pour obtenir une flèche déroulante toujours sur le côté droit de l'en-tête du tableau et j'ai trouvé cela qui semblait fonctionner dans Chrome et Firefox, mais Safari me disait que c'était une propriété non valide.

background: url(http://goo.gl/P93P5Q) center right 10px no-repeat;

Après avoir fait un peu de farce dans l'inspecteur, j'ai trouvé cette solution multi-navigateur qui fonctionne dans IE8 +, Chrome, Firefox et Safari, ainsi que des conceptions réactives.

background: url(http://goo.gl/P93P5Q) no-repeat 95% center;

Voici un codepen de son apparence et de son fonctionnement. Codepen est écrit avec SCSS - http://cdpn.io/xqGbk

Si vous souhaitez spécifier uniquement l'axe des x, vous pouvez effectuer les opérations suivantes:

background-position-x: right 100px;

Une autre solution que je n'ai pas vue mentionnée est d'utiliser des pseudo-éléments et je crois que cette solution fonctionnera avec n'importe quel navigateur compatible CSS 2.1 (≥ IE8, ≥ Safari 2, ...) et elle devrait également être réactive:

element::after
{
content:' ';
position:relative;
display:block;
width:100%;
height:100%;
bottom:0;
right:-5px; /* 10 px from the right of element inner-margin (padding) see example */
background:url() right center no-repeat;
}

Exemple : l'élément par exemple. un carré de 100 pixels (sans tenir compte des bordures) a un remplissage de 10 pixels et une image d'arrière-plan doit être affichée à l'intérieur du remplissage de droite. Cela signifie que le pseudo-élément est un carré de 80 pixels. Nous voulons le coller au bord droit de l'élément avec right: -10px; . Si nous aimerions avoir l'image d'arrière-plan à 5 pixels de la bordure droite, nous devons coller le pseudo-élément à 5 pixels de la bordure droite de l'élément avec la droite: -5 pixels; ... Testez-le par vous-même ici: http://jsfiddle.net/yHucT/

Si le conteneur a une hauteur fixe: Tweek les pourcentages (position d'arrière-plan) jusqu'à ce qu'il s'adapte correctement.

Si le conteneur a une hauteur dynamique: si vous souhaitez un remplissage entre votre arrière-plan et votre conteneur (comme lors de la saisie de style personnalisé, sélectionne), ajoutez votre remplissage à votre image et définissez la position de l'arrière-plan à droite ou en bas.

Je suis tombé sur cette question alors que j'essayais d'obtenir l'arrière-plan d'une boîte de sélection pour s'adapter, disons, 5 px à droite de ma sélection. Dans mon cas, mon arrière-plan est une flèche vers le bas qui remplacerait l'icône déroulante de base. Dans mon cas, le rembourrage restera toujours le même (5 à 10 pixels à partir de la droite) pour l'arrière-plan, il est donc facile de modifier l'image de fond réelle (en élargissant ses dimensions de 5 à 10 pixels sur le côté droit).

J'espère que cela t'aides!

Vous pouvez positionner votre image d'arrière-plan dans un éditeur à x pixels du côté droit.

background: url(images_url) no-repeat right top;

L'image d'arrière-plan sera positionnée en haut à droite, mais apparaîtra à x pixels de la droite.

Ajuster les pourcentages à gauche est un peu fragile à mon goût. Lorsque j'ai besoin de quelque chose comme ça, j'ai tendance à ajouter mon style de conteneur à un élément wrapper, puis à appliquer l'arrière-plan sur l'élément intérieur avecbackground-position: right bottom

<style>
    .wrapper {
        background-color: #333;
        border: solid 3px #222;
        padding: 20px;
    }
    .bg-img {
        background-image: url(path/to/img.png);
        background-position: right bottom;
        background-repeat: no-repeat;
    }
    .content-breakout {
        margin: -20px
    }
</style>

<div class="wrapper">
    <div class="bg-img">
        <div class="content-breakout"></div>
    </div>
</div>

La .content-breakoutclasse est facultative et permettra à votre contenu de manger dans le rembourrage si nécessaire (les valeurs de marge négatives doivent correspondre aux valeurs correspondantes dans le rembourrage de l'emballage). C'est un peu verbeux, mais fonctionne de manière fiable sans avoir à se soucier du positionnement relatif de l'image par rapport à sa largeur et sa hauteur.

Cela fait mal depuis que cette question a été posée, mais je viens de rencontrer ce problème et je l'ai obtenu en faisant:

background-position:95% 50%;

Solution pour les valeurs négatives. Réglez le remplissage à droite pour déplacer l'image.

<div style='overflow:hidden;'>

    <div style='width:100% background:url(images.jpg) top right; padding-right:50px;'>

    </div>

</div>

Cela fonctionne dans Chrome 27, je ne sais pas s'il est valide ou non ou ce que les autres navigateurs en font. J'en ai été surpris.

background: url(../img/icon_file_upload.png) top+3px right+10px no-repeat;

Fonctionne pour tous les navigateurs réels (et pour IE9 +):

background-position: right 10px top 10px;

Je l'utilise pour les thèmes RTL WordPress. Voir l'exemple: le site Web temporaire ou le vrai site Web sera bientôt disponible. Regardez les icônes dans les grands coins droits des DIV.

Mieux pour tous les arrière-plans: url ('../ images / bg-menu-dropdown-top.png') gauche 20px en haut sans répétition! Important;