centrar imagen y que entre exacto en .html

El_derby · #1 (**permalink**) 19/03/2012, 09:19

tengo una imagen de fondo en mi archivo index.html, pero quiero que la imagen se vea completa en todo el fondo, como puedo acerpara que no se corte y repita la misma imagen como si estuviera cortada?

saludos

DanielRGB · #2 (**permalink**) 19/03/2012, 10:18

Hola derby,

Necesitaría ver la imagen exacta para aconsejarte, lo que si puedo decirte que dependiendo por ejemplo...

Supongamos que tu fondo es un paisaje muy "potito" con montañas, arboles, un lago, etc... y quieres que ese sea el fondo de tu web... que esté centrado en todo el medio...
Pues está claro que si la resolución de pantalla, es más grande que el tamaño de la imagen, llegará a verse el color de fondo de la página, ya sea blanco, negro, gris... el que tengas puesto. Y si quieres que se repita, pues se verá muy feo, los cortes...

kseso? · #3 (**permalink**) 19/03/2012, 12:32

Hola Derby, ¡cuanto tiempo!
No me queda claro qué necesitas lograr. Encuentro una pequeña contradicción en tu exposición:

Cita:

tengo una imagen de fondo en mi archivo index.html, pero quiero que la imagen se vea completa en todo el fondo, como puedo acer para que no se corte y repita la misma imagen como si estuviera cortada?

¿quieres que una sóla copia de la imagen cubra todo el fondo?
Css3 --> background-size
Css2.1 no lo contempla, pero se puede simular poniendo la imagen vía src en el html

¿quieres que se repita y no se noten las juntas o uniones?
Css2.1 --> background-repeat y -position junto con un trabajo previo de diseño de la imagen.

Quizás haya acertado por casualidad. Si no es eso ya nos aclaras un poco más.

El_derby · #4 (**permalink**) 19/03/2012, 13:45

gracias amigo, que tal keseso a los años, mira lo que quiero hacer es esto

http://www.fisiopilatesperu.com/

yo lo veo bien, pero mi cliente me dice que lo ve la parte derecha cortada unos 80px, lo que deduzco es que tu pantalla tiene una mayor resoulcion es por esoq ue lo ve cortada, (termina la parte oscura y empieza mas clara) como puedo hacer para que no se vea asi, o duplico la imagen a la inversa y agrando su ancho mas o hay algun codigo para que discimule ese detalle

gracias

kseso? · #5 (**permalink**) 19/03/2012, 14:46

Vale. Ahora sí comprendí.
Es lo que siempre he conocido como imagen al 100%.
Haz lo siguiente:
quita la imagen del fondo del body.
comienza tu html así:

Código HTML:

Ver original</head>
<body>
  <div id="fondo-imag">
    <img src="http://www.fisiopilatesperu.com/img_0524.jpg" alt="una imagen" />
  </div>
<!-- Aquí todo el resto de tu página tu y demás
<div align="center"> eliminando este comentario-->

Y en tu css añades:

Código CSS:

Ver original* {
    margin: 0;
    padding: 0;
    border: 0;
/*    position: relative; */ /*opcional*/
  }
html, body {
        width: 100%;
        min-height: 100%;
        height: auto !important;
        height: 100%;
}
#fondo-imag {
        position:fixed;
        top:-50%;
        left:-50%;
        width:200%;
        height:200%;
}
#fondo-imag img {
        position:absolute;
        top:0;
        left:0;
        right:0;
        bottom:0;
        margin:auto;
        min-width:50%;
        min-height:50%;
}

Con esto se aseguras que sea cual sea el tamaño del monitor la imagen cubrirá todo el fondo.

Pero deberías revisar un poco el peso de la página, tardó en cargar y cuando lo hizo fue con la musiquita sonando.

El_derby · #6 (**permalink**) 19/03/2012, 22:25

gracias amigo ahora lo pruebo