Desloque uma imagem de fundo da direita usando CSS

Existe uma maneira de posicionar uma imagem de plano de fundo em um determinado número de pixels à direita de seu elemento?

Por exemplo, para posicionar algo com um certo número de pixels (digamos, 10) da esquerda , é assim que eu faria:

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

Achei esse recurso CSS3 útil:

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

Tanto quanto sei, isso não é suportado no IE8. No mais recente Chrome / Firefox, funciona bem.

Consulte Posso usar para obter detalhes sobre os navegadores suportados.

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

Atualização :

Agora, esse recurso é suportado em todos os principais navegadores, incluindo navegadores móveis.

!! Resposta desatualizada, pois CSS3 trouxe esse recurso

Existe uma maneira de posicionar uma imagem de plano de fundo em um determinado número de pixels à direita de seu elemento?

Não.

Soluções populares incluem

• definindo um margin-rightno elemento
• adicionando pixels transparentes à própria imagem e posicionando-a top right
• ou calcular a posição usando jQuery depois que a largura do elemento for conhecida.

A solução mais fácil é usar porcentagens. Esta não é exatamente a resposta que você estava procurando desde que pediu precisão em pixels, mas se você precisar de algo para ter um pequeno preenchimento entre a borda direita e a imagem, dar a uma posição de 99% algo geralmente funciona bem o suficiente.

Código:

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

Resposta desatualizada: Agora está implementado nos principais navegadores. Consulte as outras respostas para esta pergunta.

O CSS3 modificou a especificação de background-positionpara que funcione com diferentes pontos de origem. Infelizmente, não consigo encontrar nenhuma evidência de que ela tenha sido implementada nos principais navegadores.

http://www.w3.org/TR/css3-background/#the-background-position Veja o exemplo 12.

background-position: right 3em bottom 10px;

Conforme proposto aqui , esta é uma solução bonita para vários navegadores que funciona perfeitamente:

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

Eu o usei, pois o recurso CSS3 de especificar as compensações propostas na resposta marcada como solução da questão ainda não é suportado nos navegadores. Por exemplo

A resposta mais apropriada é a nova sintaxe de quatro valores para a posição de segundo plano, mas até que todos os navegadores suportem, sua melhor abordagem é uma combinação de respostas anteriores na seguinte ordem:

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

Um truque simples, porém sujo, é simplesmente adicionar o deslocamento desejado à imagem que você está usando como plano de fundo. não é sustentável, mas faz o trabalho.

Isso funcionará nos navegadores mais modernos ... além do IE (suporte ao navegador) . Embora essa página lista> = IE9 como compatível, meus testes não concordaram com isso.

Você pode usar a propriedade calc () css3 assim;

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

Para mim, esta é a maneira mais limpa e lógica de obter uma margem para a direita. Eu também uso um substituto do border-right: 10px solid transparent;IE.

Ok, se eu entendo o que você está pedindo, você faria isso;

Você tem seu contêiner DIV chamado #main-containere .my-elementestá nele. Use isso para você começar;

#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 propósito, é melhor usar classes se você fizer referência a um elemento de nível inferior em uma página (presumo que você seja o meu nome alterado acima.

A especificação CSS3, que permite origens diferentes para a posição de segundo plano, agora é suportada no Firefox 14, mas ainda não no Chrome 21 (aparentemente o IE9 as suporta parcialmente, mas eu ainda não testei)

Além do problema do Chrome que o @MattyF referenciou, há um resumo mais sucinto aqui: http://code.google.com/p/chromium/issues/detail?id=95085

Se você tiver elementos proporcionais, poderá usar:

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

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

Neste exemplo, .validseria a classe com a imagem e.half seria uma linha com metade do tamanho da padrão.

Sujo, mas funciona como um encanto e é razoavelmente gerenciável.

Se você quiser usar isso para adicionar setas / outros ícones a um botão, por exemplo, poderá usar pseudoelementos css?

Se for realmente uma imagem de plano de fundo para o botão inteiro, costumo incorporar o espaçamento na imagem e usar

background-position: right 0;

Mas se eu tiver que adicionar, por exemplo, uma seta projetada a um botão, eu tenderá a ter este html:

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

E tende a fazer o seguinte com 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 o seletor: after, adiciono um elemento usando CSS apenas para conter esse pequeno ícone. Você pode fazer o mesmo adicionando uma extensão ou<i> elemento dentro do elemento a. Mas acho que essa é uma maneira mais limpa de adicionar ícones aos botões e é compatível com vários navegadores.

você pode conferir o violino aqui: http://codepen.io/anon/pen/PNzYzZ

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

usar centro direito como a posição e adicionar uma borda transparente para compensá-la?

Se você possui um elemento de largura fixa e conhece a largura da sua imagem de plano de fundo, basta definir a posição do plano de fundo para: largura do elemento - largura da imagem - a lacuna desejada à direita.

Por exemplo: com um elemento de 100 px e uma imagem de 300 px, para obter um intervalo de 10 px à direita, você o define como 100-300-10 = -210 px:

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

E você obtém os 80 pixels mais à direita da sua imagem à esquerda do seu elemento e um intervalo de 20 px à direita.

Eu sei que pode parecer estúpido, mas às vezes economiza tempo ... Eu uso muito isso de maneira vertical (lacuna na parte inferior) para links de navegação com texto abaixo da imagem.

Não tenho certeza se isso se aplica ao seu caso.

meu problema era que eu precisava da imagem de plano de fundo para manter a mesma distância da borda direita quando a janela é redimensionada, ou seja, para tablet / celular etc. Minha correção é usar um percenatge como:

background-position: 98% 6px;

e fica no lugar.

sim! bem para posicionar uma imagem de fundo como se 0px do lado direito do navegador em vez da esquerda - eu uso:

background-position: 100% 0px;