¿Cómo cambiar el tamaño y flotar a la derecha una imagen de fondo usando css?

Estoy trabajando en este sitio: http://www.problemio.com y tengo un requisito para agregar la imagen de fondo al banner superior que hice.¿Cómo cambiar el tamaño y flotar a la derecha una imagen de fondo usando css?

Lo que no sé cómo hacer es cómo desplazarlo completamente hacia la derecha y hacerlo más pequeño en longitud para que ocupe la mitad del ancho de la pantalla.

¿Alguna idea de cómo hacer eso? Hasta ahora tengo este CSS para el div general banner:

.banner 
{ 
    width:60em; 
    margin: 0 auto; 
    position: relative; 
    padding: 0.3em 0; 
    z-index: 1; 
    background-image: url('http://www.problemio.com/img/ui/problemiotoprightimage.png'); 
    background-repeat: no-repeat; 
    background-image: right-align 
}

pero no sé cómo hacer que la imagen de fondo alinear a la derecha y reescalar a ser del 50% de todo el ancho de la div. ¿Algunas ideas?

Gracias!

Fuente

2011-10-03 Genadinik

No debería tener que incluir escalado en su CSS. Si la imagen debe ser de un tamaño particular, hágalo de ese tamaño. – eaj

Puede utilizar left, right, bottom, top y center para la alineación de fondos. También porcentajes.

background: url('http://www.problemio.com/img/ui/problemiotoprightimage.png') right no-repeat;

Sin embargo, no puede cambiar el tamaño de las imágenes utilizando CSS2, pero en CSS3.

background-size: <width> <height>;

Más uso:

background: url('http://www.problemio.com/img/ui/problemiotoprightimage.png') top right no-repeat;

Para alinear inferior y centrado:

background: url('http://www.problemio.com/img/ui/problemiotoprightimage.png') bottom center no-repeat;

Fuente

2011-10-03 18:22:00 MacMac

A menos que use la propiedad [background 'size-size' de CSS3] (http://www.css3.info/preview/background-size/), que tiene [soporte de navegador decente] (http://caniuse.com/background- img-opts). – sdleihssirhc

Actualicé mi publicación a que CSS2 no admite el cambio de tamaño de las imágenes de fondo, pero en CSS3 es posible. ¡Aclamaciones! * aprendí algo nuevo hoy * – MacMac

Gracias lo que todavía no entiendo es lo que está causando que el pequeño banner del derecho sea de color gris sólido y que la imagen de fondo no se extienda allí. ¿Sabrías por qué está sucediendo eso? – Genadinik

Uso background-position: right; y background-size: [width] [height] (reemplazar los valores cuando sea necesario).

Fuente

2011-10-03 18:23:54

¿Cómo cambiar el tamaño y flotar a la derecha una imagen de fondo usando css?

Respuesta

Cuestiones relacionadas