Offset un'immagine di sfondo da destra usando CSS

C'è un modo per posizionare un'immagine di sfondo di un certo numero di pixel dalla destra del suo elemento?

Ad esempio, per posizionare qualcosa di un certo numero di pixel (diciamo, 10) da sinistra , ecco come lo farei:

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

Ho trovato utile questa funzione CSS3:

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

Per quanto ne so, questo non è supportato in IE8. Nell'ultimo Chrome / Firefox funziona benissimo.

Vedi Posso usare per i dettagli sui browser supportati.

Fonte utilizzata: http://tanalin.com/en/blog/2011/09/css3-background-position/

Aggiornamento :

Questa funzione è ora supportata in tutti i principali browser, inclusi i browser mobili.

!! Risposta obsoleta, poiché CSS3 ha introdotto questa funzione

C'è un modo per posizionare un'immagine di sfondo di un certo numero di pixel dalla destra del suo elemento?

No.

Soluzioni alternative popolari includono

• impostando invece un margin-rightsull'elemento
• aggiungendo pixel trasparenti all'immagine stessa e posizionandola top right
• oppure calcolando la posizione usando jQuery dopo che la larghezza dell'elemento è nota.

La soluzione più semplice è utilizzare le percentuali. Questa non è esattamente la risposta che stavi cercando da quando hai chiesto la precisione dei pixel, ma se hai solo bisogno di qualcosa per avere un po 'di imbottitura tra il bordo destro e l'immagine, dare qualcosa al 99% di solito funziona abbastanza bene.

Codice:

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

Risposta obsoleta: ora è implementata nei principali browser, vedere le altre risposte a questa domanda.

CSS3 ha modificato le specifiche in background-positionmodo da funzionare con diversi punti di origine. Sfortunatamente, non riesco a trovare alcuna prova che sia ancora implementato in tutti i principali browser.

http://www.w3.org/TR/css3-background/#the-background-position Vedi esempio 12.

background-position: right 3em bottom 10px;

Come proposto qui , questa è una soluzione piuttosto cross-browser che funziona perfettamente:

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

L'ho usato poiché la funzione CSS3 di specificare gli offset proposti nella risposta contrassegnata come risoluzione della domanda non è ancora supportata nei browser così bene. Per esempio

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

Un trucco semplice ma sporco è semplicemente aggiungere l'offset desiderato all'immagine che si sta utilizzando come sfondo. non è mantenibile, ma fa il lavoro.

Funzionerà con la maggior parte dei browser moderni ... a parte IE (supporto browser) . Anche se quella pagina elenca> = IE9 come supportato, i miei test non erano d'accordo.

Puoi usare la proprietà calc () css3 in questo modo;

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

Per me questo è il modo più pulito e logico per ottenere un margine a destra. Uso anche un fallback dell'utilizzo border-right: 10px solid transparent;per IE.

Ok, se capisco cosa ti stai chiedendo, faresti questo;

Hai il tuo contenitore DIV chiamato #main-containere .my-elementquello è al suo interno. Usa questo per iniziare;

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

A proposito, è meglio usare le classi se si fa riferimento a un elemento di livello inferiore all'interno di una pagina (presumo che tu sia quindi il mio cambio di nome sopra.

La specifica CSS3 che consente origini diverse per la posizione in background è ora supportata in Firefox 14 ma non ancora in Chrome 21 (apparentemente IE9 li supporta in parte, ma non l'ho testato da solo)

Oltre al problema di Chrome a cui fa riferimento @MattyF, qui è disponibile un riepilogo più conciso: http://code.google.com/p/chromium/issues/detail?id=95085

Se hai elementi proporzionati, puoi usare:

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

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

In questo esempio, .validsarebbe la classe con l'immagine e .halfsarebbe una riga con metà delle dimensioni di quella standard.

Sporco, ma funziona come un fascino ed è ragionevolmente gestibile.

Se desideri usarlo per aggiungere frecce / altre icone a un pulsante, ad esempio, potresti usare gli pseudo-elementi css?

Se è davvero un'immagine di sfondo per l'intero pulsante, tendo a incorporare la spaziatura nell'immagine e basta usare

background-position: right 0;

Ma se devo aggiungere ad esempio una freccia progettata a un pulsante, tendo ad avere questo HTML:

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

E tendono a fare quanto segue con 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;
}

Usando il selettore: after, aggiungo un elemento usando CSS solo per contenere questa piccola icona. Puoi fare lo stesso semplicemente aggiungendo uno span o un <i>elemento all'interno dell'elemento a. Ma penso che questo sia un modo più pulito di aggiungere icone ai pulsanti ed è supportato da più browser.

puoi dare un'occhiata al violino qui: http://codepen.io/anon/pen/PNzYzZ

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

usare il centro a destra come posizione, quindi aggiungere un bordo trasparente per spostarlo?

Se hai un elemento a larghezza fissa e conosci la larghezza dell'immagine di sfondo, puoi semplicemente impostare la posizione dello sfondo su: la larghezza dell'elemento - la larghezza dell'immagine - lo spazio che desideri sulla destra.

Ad esempio: con un elemento di larghezza 100px e un'immagine di larghezza 300px, per ottenere uno spazio di 10px a destra, impostarlo su 100-300-10 = -210px:

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

E ottieni gli 80 pixel più a destra della tua immagine a sinistra del tuo elemento e uno spazio di 20 pixel a destra.

So che può sembrare stupido ma a volte fa risparmiare tempo ... Lo uso molto in modo verticale (spazio in basso) per i collegamenti di navigazione con testo sotto l'immagine.

Non sono sicuro che si applichi al tuo caso però.

il mio problema era che avevo bisogno che l'immagine di sfondo rimanesse alla stessa distanza dal bordo destro quando la finestra veniva ridimensionata, ad es. per tablet / cellulare ecc. La mia correzione è usare un percenatge in questo modo:

background-position: 98% 6px;

e si attacca sul posto.

sì! bene per posizionare un'immagine di sfondo come se 0px dal lato destro del browser invece che a sinistra - io uso:

background-position: 100% 0px;