toda - imagen de fondo html5 css3

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

Question

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

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

Answer 1

Ajustar los porcentajes de 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 de envoltura y luego aplico el fondo en el elemento interno con background-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 clase .content-breakout es opcional y permitirá que su contenido .content-breakout en el relleno si es necesario (los valores de margen negativos deben coincidir con los valores correspondientes en el relleno del contenedor). Es un poco detallado, pero funciona de manera confiable sin tener que preocuparse por la posición relativa de la imagen en comparación con su anchura y altura.

Answer 2

Es posible usar el border atributo como longitud desde la derecha

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

Answer 3

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 estaba diciendo que era una propiedad no válida.

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

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

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

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

Answer 4

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

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

Answer 5

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

background-position: right 10px top 10px;

Lo uso para temas de RTL WordPress. Ver ejemplo: el sitio web temporal o el sitio web real estará listo pronto. Mira los iconos en las grandes esquinas DIVs a la derecha.

Answer 6

Ha pasado mucho tiempo desde que se hizo esta pregunta, pero acabo de encontrarme con este problema y lo entendí haciendo:

background-position:95% 50%;

Answer 7

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.

Answer 8

La respuesta más adecuada 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+ */

Answer 9

La solución de imagen con píxeles transparentes a la derecha sirve como margen derecho.

La solución alternativa de la imagen para la misma es crear una imagen PNG o GIF (formatos de archivo de imagen que admitan transparencia) que tenga una parte transparente a la derecha de la imagen exactamente igual a la cantidad de píxeles a los que desea dar un margen derecho de ( por ejemplo: 5px, 10px, etc.)

Esto funciona bien de manera consistente a través de anchos fijos así como anchos en porcentajes. Prácticamente una buena solución para los encabezados de acordeón con una imagen de flecha de 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 un degradado / viñeta), principalmente blanco / negro, etc.

Answer 10

Mejor para todos los fondos: url (''../ images / bg-menu-dropdown-top.png'') izquierda 20px arriba no-repeat! Important;

Answer 11

Otra solución que no he visto mencionada 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 ser receptivo:

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 por ejemplo. un tamaño cuadrado de 100 px (sin considerar los bordes) tiene un relleno de 10 píxeles y se debe mostrar una imagen de fondo dentro del relleno derecho. Esto significa que el pseudo-elemento es un cuadrado de tamaño 80px. Queremos pegarlo en el borde derecho del elemento con el derecho: -10px; . Si nos gustaría tener la imagen de fondo 5px alejada del borde derecho, necesitamos pegar el pseudoelemento 5px del borde derecho del elemento con el derecho: -5px; ... Pruébelo usted mismo aquí: http://jsfiddle.net/yHucT/

Answer 12

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

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

Answer 13

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.

Answer 14

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 aparecerá x píxeles desde la derecha.

Answer 15

Puedes hacerlo en CSS3:

background-position: right 20px bottom 20px;

Funciona en Firefox, Chrome, IE9 +

Fuente: MDN

Answer 16

Si te topas con este tema en estos días de navegadores modernos, puedes usar una pseudo-clase: después de hacer cualquier cosa práctica 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 un espacio de 20 px en el lado derecho.

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

Answer 17

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

Answer 18

Solución para valores negativos. Ajusta el relleno a 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>

Answer 19

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

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

Me topé con esta pregunta mientras intentaba obtener el fondo para un cuadro de selección que se ajustara, por ejemplo, 5 px desde la derecha de mi selección. En mi caso, mi fondo es una flecha hacia abajo que reemplazaría el icono 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 de llevar a la imagen de fondo real (haciendo sus dimensiones 5-10 píxeles más ancho en el lado derecho.

¡Espero que esto ayude!

Answer 20

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