CSS y diferentes tamaños de monitor?

Estoy haciendo un sitio web (WIP). Encontré algunos problemas de CSS, espero que puedan ayudarme.CSS y diferentes tamaños de monitor?

Mi situación actual:

tengo la imagen de la mañana, deja llamado "bg.png" con el ancho aproximadamente 2500px, y en el centro de la imagen de fondo tiene mi logotipo.
Mi sitio web debe estar dirigido a usuarios de todos los tamaños (desde pequeños 800 x 600 hasta 2400 x XXX).

Mis problemas:

¿Cómo centralizar la imagen de fondo (bg.png), de modo que el logotipo siempre se coloca en el centrado (horizontal) de diferentes tamaños de pantalla de los monitores?

Fuente

2010-06-11 studdler

Como usted es un usuario nuevo, asegúrese de hacer clic en el botón "aceptar" si la respuesta satisface sus necesidades. –

Pregunta bien planteada por cierto (situación actual -> problema/comportamiento deseado). –

Debe saber que algunas pantallas son más grandes que 2500. Y que también puede expandir algo en varias pantallas. Entonces 2500 no es un límite lo suficientemente grande. – Arkh

body { background: url('bg.png') 50% 50% no-repeat; }

Esto colocará la imagen en tamaño completo en el centro de la página, y el usuario verá la mayor cantidad de esta imagen de fondo como sus permisos de la ventana del navegador.

Fuente

2010-06-11 07:31:13

gracias, funciona. Pero necesito esperar otros 9 minutos para aceptar una respuesta. Gracias Graphain – studdler

Bienvenido Studdler, contento de ayudar. Vale la pena registrarse para poder realizar un seguimiento de sus preguntas y respuestas a lo largo del tiempo y para alentar a otros a que lo ayuden. –

Tomó nota con agradecimiento :) – studdler

Si fuera sólo un archivo de logotipo podría utilizar

<style> 
img 
{ 
    position:absolute; 
    left:-50%; 
    top:-50%; 
    z-index:-1; 
} 
</style>

Fuente

2010-06-11 07:34:48

Esto no centra exactamente la imagen. La izquierda de la imagen está centrada, pero el centro de la imagen no está centrado. – strager

Para hacer eso, agregue margin-left: -50%, margin-top: -50%. – Sjoerd

#your_img { 
    width: 2500px; //In example 2500px 
    margin: 50%; 
    padding: -1250px; // 2500 divided by 2 
}

Probablemente no funcionan en Internet Explorer, pero se puede utilizar un pequeño programa con position: absolute, como el anterior

Fuente

2010-06-11 08:23:44 user170609

#your_img { 

    position: absolute; 
    left: 50%; 
    margin: -1250px; 
}

Esta solución es necesaria cuando coloca el elemento img en otra caja. Pero ten cuidado: podría cambiar el tamaño de la caja de los padres.

Fuente

2010-06-11 08:26:55 user170609

CSS y diferentes tamaños de monitor?

Respuesta

Cuestiones relacionadas