Posicione uma imagem de plano de fundo CSS x pixels à direita?

Eu acho que a resposta é não, mas você pode posicionar uma imagem de plano de fundo com CSS, para que fique com uma quantidade fixa de pixels à direita?

Se eu definir os background-positionvalores de xey, parece que esses apenas fornecem ajustes fixos de pixel da esquerda e da parte superior, respectivamente.

background-position: right 30px center;

Funciona na maioria dos navegadores. Consulte: http://caniuse.com/#feat=css-background-offsets para obter a lista completa.

Mais informações: http://www.w3.org/TR/css3-background/#the-background-position

É possível usar o atributo bordercomo comprimento da direita

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

Existe uma maneira, mas não é suportada em todos os navegadores (veja a cobertura aqui )

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

Ele funciona em todos os navegadores modernos , mas é possível que o IE9 esteja travando . Também não há cobertura para = <IE8.

Até onde eu sei, a especificação CSS não fornece exatamente o que você está perguntando, fora das expressões CSS, é claro. Trabalhando com a suposição de que você não deseja usar expressões ou Javascript, vejo três soluções hackish:

• Verifique se a imagem de plano de fundo corresponde ao tamanho do contêiner (pelo menos em largura) e defina background-repeat: repeatou repeat-xse apenas a largura é igualada. Então, fazer com que algo apareça xpixels da direita é tão simples quanto background-position: -5px 0px.
• O uso de porcentagens para background-positionexibe um comportamento especial melhor que o descrito aqui. Experimente. Essencialmente, background-position: 90% 50%fará com que a borda direita da imagem de fundo fique alinhada a 10% da borda direita do contêiner.
• Crie uma div contendo a imagem. Defina explicitamente a posição do elemento que contém, position: relativese ainda não estiver definido. Coloque o recipiente da imagem em position: absolute; right: 10px; top: 10px;, obviamente, ajustando os dois finais como achar melhor. Coloque o recipiente div da imagem no elemento que contém.

Tente o seguinte:

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

Observe que o código acima moverá o elemento inteiro (não apenas a imagem de plano de fundo) 5px da direita. Isso pode ser bom para o seu caso.

Você pode fazer isso no CSS3:

background-position: right 20px bottom 20px;

Funciona no Firefox, Chrome, IE9 +

Fonte: MDN

Solução alternativa da imagem com pixels transparentes à direita para servir como margem direita.

A solução alternativa para a mesma é criar uma imagem PNG ou GIF (formatos de arquivo de imagem compatíveis com transparência) que possua uma parte transparente à direita da imagem exatamente igual ao número de pixels que você deseja dar uma margem correta de ( por exemplo: 5 px, 10 px, etc.)

Isso funciona bem de maneira consistente em larguras fixas e em larguras em porcentagens. Praticamente uma boa solução para cabeçalhos de acordeão com uma imagem de seta mais / menos ou para cima / baixo à direita!

Desvantagem: infelizmente, você não pode usar JPG, a menos que a parte de fundo do contêiner e a cor de plano de fundo da imagem de plano de fundo CSS sejam da mesma cor plana (sem gradiente / vinheta), principalmente branco / preto etc.

Se você tropeçar nesse tópico hoje em dia nos navegadores modernos, poderá usar a pseudo-classe: depois de fazer praticamente qualquer coisa com o plano de fundo.

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

esse css colocará o plano de fundo no canto inferior direito do elemento ".container" com 20px de espaço no lado direito.

Veja este violino por exemplo http://jsfiddle.net/h6K9z/226/

A resposta mais apropriada é a nova sintaxe de quatro valores para a posição de segundo plano, mas até que todos os navegadores o 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+ */

Basta colocar o preenchimento de pixel na imagem - adicione 10px ou qualquer outro tamanho ao tamanho da tela da imagem no photoshop e alinhe-o diretamente no CSS.

Eu estava tentando fazer uma tarefa semelhante para obter uma seta suspensa sempre no lado direito do cabeçalho da tabela e surgiu com isso que parecia funcionar no Chrome e Firefox, mas o safari estava me dizendo que era uma propriedade inválida.

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

Depois de mexer um pouco no inspetor, criei esta solução para vários navegadores que funciona no IE8 +, Chrome, Firefox e Safari, além de designs responsivos.

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

Aqui está um código de como é a aparência e o funcionamento. Codepen é escrito com SCSS - http://cdpn.io/xqGbk

Se você deseja especificar apenas o eixo x, pode fazer o seguinte:

background-position-x: right 100px;

Outra solução que não vi mencionada é usar pseudoelementos e acredito que essa solução funcionará com qualquer navegador compatível com CSS 2.1 (≥ IE8, ≥ Safari 2, ...) e também deve ser responsivo:

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

Exemplo : O elemento, por exemplo. um quadrado de 100px (sem considerar as bordas) possui um preenchimento de 10px e uma imagem de plano de fundo deve ser mostrada dentro do preenchimento direito. Isso significa que o pseudoelemento é um quadrado de 80px. Queremos colocá-lo na borda direita do elemento com right: -10px; . Se quisermos afastar a imagem de fundo 5px da borda direita, precisamos colocar o pseudoelemento 5px da borda direita do elemento com a direita: -5px; ... Teste você mesmo aqui: http://jsfiddle.net/yHucT/

Se o contêiner tiver uma altura fixa: Tweek as porcentagens (posição de fundo) até que ele se encaixe corretamente.

Se o contêiner tiver uma altura dinâmica: se você desejar um preenchimento entre o plano de fundo e o contêiner (como ao selecionar entradas de estilo personalizadas), adicione o preenchimento à imagem e defina a posição do plano de fundo para a direita ou para baixo.

Eu me deparei com essa pergunta enquanto tentava obter o plano de fundo para uma caixa de seleção adequada, digamos 5 px à direita da minha seleção. No meu caso, meu plano de fundo é uma seta para baixo que substituiria o ícone suspenso básico. No meu caso, o preenchimento sempre permanecerá o mesmo (5 a 10 pixels da direita) para o plano de fundo, por isso é uma modificação fácil trazer para a imagem de plano de fundo real (tornando suas dimensões de 5 a 10 pixels mais amplas no lado direito.

Espero que isto ajude!

Você pode posicionar sua imagem de plano de fundo em um editor para ser x pixels do lado direito.

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

A imagem de fundo será posicionada no canto superior direito, mas parecerá ter x pixels da direita.

Ajustar porcentagens da esquerda é um pouco frágil para o meu gosto. Quando preciso de algo assim, costumo adicionar meu estilo de contêiner a um elemento de invólucro e, em seguida, aplico o plano de fundo no elemento interno combackground-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>

A .content-breakoutclasse é opcional e permitirá que seu conteúdo seja inserido no preenchimento, se necessário (valores de margem negativos devem corresponder aos valores correspondentes no preenchimento do invólucro). É um pouco detalhado, mas funciona de maneira confiável sem ter que se preocupar com o posicionamento relativo da imagem em comparação com sua largura e altura.

Tem sido longo desde que esta pergunta foi feita, mas acabei de encontrar este problema e consegui:

background-position:95% 50%;

Solução para valores negativos. Ajuste o preenchimento à direita para mover a imagem.

<div style='overflow:hidden;'>

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

    </div>

</div>

Isso funciona no Chrome 27, não sei se é válido ou não ou o que outros navegadores fazem com ele. Fiquei surpreso com isso.

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

Funciona para todos os navegadores reais (e para o IE9 +):

background-position: right 10px top 10px;

Eu o uso para temas RTL WordPress. Veja o exemplo: o site temporário ou o site real em breve. Veja os ícones nos grandes cantos direitos das DIVs.

Melhor para todo o plano de fundo: url ('../ images / bg-menu-dropdown-top.png') deixou 20px no topo sem repetição! Important;