Posizionare un'immagine di sfondo CSS x pixel da destra?

Penso che la risposta sia no, ma puoi posizionare un'immagine di sfondo con CSS, in modo che sia una quantità fissa di pixel a destra?

Se imposto i background-positionvalori di xey, sembra che forniscano solo regolazioni pixel fisse rispettivamente da sinistra e dall'alto.

background-position: right 30px center;

Funziona nella maggior parte dei browser. Vedi: http://caniuse.com/#feat=css-background-offsets per l'elenco completo.

Ulteriori informazioni: http://www.w3.org/TR/css3-background/#the-background-position

È possibile utilizzare l'attributo bordercome lunghezza da destra

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

C'è un modo ma non è supportato su tutti i browser (vedi copertura qui )

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

Funziona con tutti i browser moderni , ma è possibile che IE9 si blocchi . Inoltre, nessuna copertura per = <IE8.

Per quanto ne so, la specifica CSS non fornisce esattamente ciò che stai chiedendo, al di fuori delle espressioni CSS, ovviamente. Lavorando sul presupposto che non si desidera utilizzare espressioni o Javascript, vedo tre soluzioni hacker:

• Assicurati che l'immagine di sfondo corrisponda alla dimensione del contenitore (almeno in larghezza) e imposta background-repeat: repeato repeat-xse solo la larghezza è equalizzata. Quindi, avere qualcosa che appare xpixel da destra è semplice comebackground-position: -5px 0px .
• L'uso delle percentuali per le background-positionesibizioni comporta un comportamento speciale che è meglio vedere di quanto descritto qui. Dagli Un colpo. Essenzialmente,background-position: 90% 50% il bordo destro dell'immagine di sfondo verrà allineato del 10% rispetto al bordo destro del contenitore.
• Crea un div contenente l'immagine. Impostare esplicitamente la posizione dell'elemento contenitore position: relativese non è già impostato. Imposta il contenitore dell'immagine su position: absolute; right: 10px; top: 10px;, ovviamente regolando gli ultimi due come meglio credi. Posiziona il contenitore div immagine nell'elemento contenitore.

Prova questo:

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

Si noti tuttavia che il codice sopra sposta l'intero elemento (non solo l'immagine di sfondo) di 5px da destra. Questo potrebbe andare bene per il tuo caso.

Puoi farlo in CSS3:

background-position: right 20px bottom 20px;

Funziona con Firefox, Chrome, IE9 +

Fonte: MDN

Soluzione alternativa dell'immagine con pixel trasparenti sulla destra per fungere da margine destro.

La soluzione alternativa per lo stesso è quella di creare un'immagine PNG o GIF (formati di file di immagine che supportano la trasparenza) che ha una parte trasparente a destra dell'immagine esattamente uguale al numero di pixel di cui si desidera dare un margine giusto di ( ad es .: 5px, 10px, ecc.)

Funziona in modo coerente su larghezze fisse e larghezze in percentuale. Praticamente una buona soluzione per le intestazioni di fisarmonica con un'immagine a freccia più / meno o su / giù a destra dell'intestazione!

Unico inconveniente: sfortunatamente, non è possibile utilizzare JPG a meno che la parte di sfondo del contenitore e il colore di sfondo dell'immagine di sfondo CSS non abbiano lo stesso colore piatto (senza gradiente / vignetta), principalmente bianco / nero ecc.

Se ti capita di imbatterti in questo argomento in questi giorni di browser moderni puoi usare la pseudo-classe: dopo fare praticamente qualsiasi cosa con lo sfondo.

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

questo CSS metterà lo sfondo nell'angolo in basso a destra dell'elemento ".container" con 20px di spazio sul lato destro.

Vedi questo violino per esempio http://jsfiddle.net/h6K9z/226/

La risposta più appropriata è la nuova sintassi a quattro valori per la posizione in background, ma fino a quando tutti i browser non la supportano l'approccio migliore è una combinazione di risposte precedenti nel seguente ordine:

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

Inserisci semplicemente il pixel padding nell'immagine - aggiungi 10px o qualsiasi altra cosa alla dimensione della tela dell'immagine in Photohop e allinearla nel CSS.

Stavo cercando di fare un compito simile per ottenere una freccia a discesa sempre sul lato destro dell'intestazione della tabella e ho trovato questo che sembrava funzionare in Chrome e Firefox, ma Safari mi stava dicendo che era una proprietà non valida.

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

Dopo aver fatto un po 'di casino in Inspector, mi è venuta in mente questa soluzione cross-browser che funziona in IE8 +, Chrome, Firefox e Safari, oltre a progetti reattivi.

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

Ecco un codice di come appare e funziona. Codepen è scritto con SCSS - http://cdpn.io/xqGbk

Se si desidera specificare solo l'asse x, è possibile effettuare le seguenti operazioni:

background-position-x: right 100px;

Un'altra soluzione che non ho mai menzionato è quella di utilizzare gli pseudo elementi e credo che questa soluzione funzionerà con qualsiasi browser compatibile con CSS 2.1 (≥ IE8, ≥ Safari 2, ...) e dovrebbe anche essere reattiva:

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;
}

Esempio : l'elemento ad es. una dimensione quadrata di 100 px (senza considerare i bordi) ha un'imbottitura di 10 px e un'immagine di sfondo dovrebbe essere mostrata all'interno dell'imbottitura a destra. Ciò significa che lo pseudo-elemento è un quadrato di dimensioni 80px. Vogliamo incollarlo sul bordo destro dell'elemento con destra: -10px; . Se desideriamo avere l'immagine di sfondo 5px di distanza dal bordo destro, dobbiamo attaccare lo pseudo-elemento 5px di distanza dal bordo destro dell'elemento con destra: -5px; ... Provalo tu stesso qui: http://jsfiddle.net/yHucT/

Se il contenitore ha un'altezza fissa: Tweek le percentuali (posizione di sfondo) fino a quando non si adatta correttamente.

Se il contenitore ha un'altezza dinamica: se si desidera un'imbottitura tra lo sfondo e il contenitore (ad esempio quando si inseriscono gli stili personalizzati, seleziona), aggiungere l'imbottitura all'immagine e impostare la posizione dello sfondo su destra o in basso.

Mi sono imbattuto in questa domanda mentre stavo cercando di ottenere lo sfondo per una casella di selezione adatta a dire 5 px dalla destra della mia selezione. Nel mio caso, il mio sfondo è una freccia in giù che sostituisce l'icona a discesa di base. Nel mio caso, l'imbottitura rimarrà sempre la stessa (5-10 pixel da destra) per lo sfondo, quindi è una semplice modifica per portare l'immagine di sfondo effettiva (allargando le sue dimensioni di 5-10 pixel sul lato destro.

Spero che questo ti aiuti!

È possibile posizionare l'immagine di sfondo in un editor in modo che sia x pixel dal lato destro.

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

L'immagine di sfondo verrà posizionata in alto a destra, ma apparirà come x pixel da destra.

Modificare le percentuali da sinistra è un po 'fragile per i miei gusti. Quando ho bisogno di qualcosa del genere, tendo ad aggiungere lo stile del mio contenitore a un elemento wrapper e quindi applicare lo sfondo sull'elemento interno conbackground-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 è facoltativa e consentirà al contenuto di essere inserito nell'imbottitura, se necessario (i valori del margine negativo devono corrispondere ai valori corrispondenti nell'imbottitura del wrapper). È un po 'prolisso, ma funziona in modo affidabile senza doversi preoccupare del posizionamento relativo dell'immagine rispetto alla sua larghezza e altezza.

È in disaccordo da quando questa domanda è stata posta, ma ho appena incontrato questo problema e l'ho capito facendo:

background-position:95% 50%;

Soluzione per valori negativi. Regola l'imbottitura verso destra per spostare l'immagine.

<div style='overflow:hidden;'>

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

    </div>

</div>

Funziona in Chrome 27, non so se sia valido o meno o cosa ne facciano altri browser. Ne sono rimasto sorpreso.

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

Funziona con tutti i browser reali (e per IE9 +):

background-position: right 10px top 10px;

Lo uso per i temi di WordPress RTL. Vedi esempio: il sito Web temporaneo o il sito Web reale sarà presto disponibile. Guarda le icone nei grandi angoli DIV a destra.

Meglio per tutti gli sfondi: url ('../ images / bg-menu-dropdown-top.png') ha lasciato 20px in alto senza ripetere! Importante;