¿Colocar una imagen de fondo CSS x píxeles desde la derecha?

Creo que la respuesta es no, pero ¿puedes colocar una imagen de fondo con CSS, de modo que esté a una cantidad fija de píxeles lejos de la derecha?

Si configuro background-positionvalores de x e y, parece que solo dan ajustes fijos de píxeles desde la izquierda y la parte superior respectivamente.

background-position: right 30px center;

Funciona en la mayoría de los navegadores. Consulte: http://caniuse.com/#feat=css-background-offsets para ver la lista completa.

Más información: http://www.w3.org/TR/css3-background/#the-background-position

Es posible usar el atributo bordercomo longitud desde la derecha

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

Hay una forma, pero no es compatible con todos los navegadores (consulte la cobertura aquí )

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

Funciona en todos los navegadores modernos , pero es posible que IE9 se bloquee . Tampoco hay cobertura para = <IE8.

Hasta donde yo sé, la especificación CSS no proporciona exactamente lo que está pidiendo, fuera de las expresiones CSS, por supuesto. Partiendo de la suposición de que no desea utilizar expresiones o Javascript, veo tres soluciones piratas:

• Asegúrese de que su imagen de fondo coincida con el tamaño del contenedor (al menos en ancho) y establezca background-repeat: repeato repeat-xsi solo se iguala el ancho. Entonces, hacer que algo aparezca xpíxeles desde la derecha es tan simple como background-position: -5px 0px.
• El uso de porcentajes para background-positionexhibe un comportamiento especial que se ve mejor de lo que se describe aquí. Dale un tiro. Esencialmente, background-position: 90% 50%hará que el borde derecho de la imagen de fondo se alinee a un 10% del borde derecho del contenedor.
• Crea un div que contenga la imagen. Establezca explícitamente la posición del elemento contenedor position: relativesi aún no está configurado. Establezca el contenedor de imágenes en position: absolute; right: 10px; top: 10px;, obviamente ajustando los dos últimos como mejor le parezca. Coloque el contenedor div de imagen en el elemento contenedor.

Prueba esto:

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

Sin embargo, tenga en cuenta que el código anterior moverá todo el elemento (no solo la imagen de fondo) 5px desde la derecha. Esto podría estar bien para su caso.

Puedes hacerlo en CSS3:

background-position: right 20px bottom 20px;

Funciona en Firefox, Chrome, IE9 +

Fuente: MDN

Solución alternativa de imágenes con píxeles transparentes a la derecha para servir como margen derecho.

La solución alternativa de la imagen para el mismo es crear una imagen PNG o GIF (formatos de archivo de imagen que admitan la transparencia) que tiene una porción transparente a la derecha de la imagen exactamente igual al número de píxeles que desea dar un margen derecho de ( por ejemplo: 5px, 10px, etc.)

Esto funciona bien consistentemente en anchos fijos, así como anchos en porcentajes. ¡Prácticamente una buena solución para encabezados de acordeón que tienen una imagen de flecha más / menos o arriba / abajo a la derecha del encabezado!

Desventaja: Desafortunadamente, no puede usar JPG a menos que la parte de fondo del contenedor y el color de fondo de la imagen de fondo CSS sean del mismo color plano (sin degradado / viñeta), principalmente blanco / negro, etc.

Si se topa con este tema en estos días de los navegadores modernos, puede usar pseudoclase: después de hacer prácticamente cualquier cosa con el fondo.

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

este CSS colocará el fondo en la esquina inferior derecha del elemento ".container" con 20px de espacio en el lado derecho.

Vea este violín, por ejemplo http://jsfiddle.net/h6K9z/226/

La respuesta más apropiada es la nueva sintaxis de cuatro valores para la posición de fondo, pero hasta que todos los navegadores lo admitan, su mejor enfoque es una combinación de respuestas anteriores en el siguiente orden:

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

Simplemente coloque el relleno de píxeles en la imagen: agregue 10 píxeles o lo que sea al tamaño del lienzo de la imagen en photohop y alinéelo directamente en CSS.

Estaba tratando de hacer una tarea similar para obtener una flecha desplegable siempre en el lado derecho del encabezado de la tabla y se me ocurrió esto que parecía funcionar en Chrome y Firefox, pero Safari me decía que era una propiedad no válida.

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

Después de jugar un poco en el inspector, se me ocurrió esta solución de navegador cruzado que funciona en IE8 +, Chrome, Firefox y Safari, así como diseños receptivos.

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

Aquí hay un codepen de cómo se ve y funciona. Codepen está escrito con SCSS - http://cdpn.io/xqGbk

Si desea especificar solo el eje x, puede hacer lo siguiente:

background-position-x: right 100px;

Otra solución que no he visto es usar pseudo elementos y creo que esta solución funcionará con cualquier navegador compatible con CSS 2.1 (≥ IE8, ≥ Safari 2, ...) y también debería responder:

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

Ejemplo : el elemento ej. un tamaño cuadrado de 100 px (sin considerar los bordes) tiene un relleno de 10 px y se debe mostrar una imagen de fondo dentro del relleno derecho. Esto significa que el pseudo-elemento es un cuadrado de 80 px de tamaño. Queremos pegarlo en el borde derecho del elemento con right: -10px; . Si nos gustaría tener la imagen de fondo a 5px del borde derecho, necesitamos pegar el pseudo-elemento 5px lejos del borde derecho del elemento con right: -5px; ... Pruébelo usted mismo aquí: http://jsfiddle.net/yHucT/

Si el contenedor tiene una altura fija: modifique los porcentajes (posición de fondo) hasta que encaje correctamente.

Si el contenedor tiene una altura dinámica: si desea un relleno entre su fondo y su contenedor (como cuando selecciona entradas de estilo personalizadas), agregue su relleno a su imagen y configure la posición del fondo a la derecha o al fondo.

Me topé con esta pregunta mientras intentaba obtener el fondo de un cuadro de selección que se ajustara a unos 5 px desde la derecha de mi selección. En mi caso, mi fondo es una flecha hacia abajo que reemplazaría el ícono desplegable básico. En mi caso, el relleno siempre seguirá siendo el mismo (5-10 píxeles desde la derecha) para el fondo, por lo que es una modificación fácil llevar a la imagen de fondo real (haciendo que sus dimensiones sean 5-10 píxeles más anchas en el lado derecho.

¡Espero que esto ayude!

Puede colocar su imagen de fondo en un editor para que sea x píxeles desde el lado derecho.

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

La imagen de fondo se colocará en la parte superior derecha, pero parecerá estar a x píxeles de la derecha.

Ajustar porcentajes desde la izquierda es un poco frágil para mi gusto. Cuando necesito algo como esto, tiendo a agregar mi estilo de contenedor a un elemento contenedor y luego aplicar el fondo en el 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-breakoutclase es opcional y permitirá que su contenido se coma en el relleno si es necesario (los valores de margen negativo deben coincidir con los valores correspondientes en el relleno del envoltorio). Es un poco detallado, pero funciona de manera confiable sin tener que preocuparse por el posicionamiento relativo de la imagen en comparación con su ancho y altura.

Ha sido largo desde que se hizo esta pregunta, pero me encontré con este problema y lo obtuve haciendo:

background-position:95% 50%;

Solución para valores negativos. Ajuste el relleno hacia la derecha para mover la imagen.

<div style='overflow:hidden;'>

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

    </div>

</div>

Esto funciona en Chrome 27, no sé si es válido o no o qué otros navegadores hacen con él. Me sorprendió esto.

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

Funciona para todos los navegadores reales (y para IE9 +):

background-position: right 10px top 10px;

Lo uso para temas de WordPress RTL. Ver ejemplo: el sitio web temporal o el sitio web real estarán disponibles pronto. Mire los íconos en las esquinas derechas grandes de los DIV

Mejor para todos los antecedentes: url ('../ images / bg-menu-dropdown-top.png') dejó 20px arriba sin repetir! Importante;