Comunidad de diseño web y desarrollo en internet online

Imagen de fondo ocupando todo la ventana

Citar            
MensajeEscrito el 23 Abr 2012 07:30 am
Hola a todos,

estoy empezando a darle a HTML y CSS y tengo que hacer ahora una web un poco peculiar (para mi) y ante de empezar quería ver si alguien me podía dar algún pequeño consejo para ver si voy por el camino correcto, os cuento, básicamente me pregunto dos cosas...

Tengo que hacer una web que es básicamente fotografía, el cliente me ha pedido que todo el fondo del navegador esté ocupado con una foto en cada una de las secciones de la web. Esa foto tiene que estar centrada horizontalmente, con lo cual me imagino que tendrá que ser un div ya que si la pongo como background image no tengo posibilidad de centrarla, ¿no? Bueno, si hay otras maneras de centrar esa imagen y alguien me lo indica, se lo agradezco que yo estoy muy verde y posiblemente haya mejores formas.

El otro punto que me interesa, es que estas imágenes que tienen que ocupar el fondo, me imagino que sería conveniente tenerlas en 3-4 tamaños para adaptarse a el fondo de un dispositivo móvil, de un PC, de un portatil, de un iMac 27"... ¿Es así o no?

Bueno, cualquier ayuda y/o consejo es más que bien recibido. Muchas gracias de antemano.

Por torpedete

85 de clabLevel



Genero:Masculino  

chrome
Citar            
MensajeEscrito el 23 Abr 2012 05:03 pm
Para tus dos preguntas: no y no :P.

Si pones la imagen como background sí puedes centrarla vertical y horizontalmente:
[css]
#fondo {
background-image: url("miimagen.jpg");
background-position: center center;
background-repeat: no-repeat;
}
[/css]
Si además quieres que ocupe todo el fondo sin importar el tamaño de la ventana puedes agregar:
[css]
background-size: 100% 100%;
[/css]
Tienes un concepto erróneo sobre los tamaños de visualización. Lo que importa es el tamaño en pixels de la ventana (o pestaña) del navegador, el tamaño físico de la pantalla es irrelevante. Puedes tener un monitor de 27" pero si la resolución está en 640x480, siguen siendo 640 pixels de ancho y 480 pixel de alto (claro que serán unos pixels bastante grandes :p).

Por DriverOp

Claber

2510 de clabLevel



 

opera
Citar            
MensajeEscrito el 24 Abr 2012 07:06 am
Ja ja ja, pues si que estoy bien :shock: Muchas gracias lo primero por tu respuesta :)

El problema con la segunda pregunta es que creo que no me he explicado bien... el caso es que como decía, todo el fondo de la ventana tiene que estar ocupado por una imagen, hasta ahí bien, pero si utilizo una misma imagen, me imagino que viéndola en un monitor de 27", esta se verá muy reescalada, ¿no? Y pregunto por que ya ves que ando bastante pez...

Yo creía que sería mejor tener cada imagen en 2-3 tamaños y poner como background según el tamaño de la ventana, dado que si pongo una imagen de, por ejemplo 1000 px de alto, y la ventana del navegador tiene 600 px, ¿me perderé los 400 de excedente o se me reescala con el 100% que has puesto? Es que si se reescala, es un poco putada por que distorsionará las imágenes, y es una persona que le da muchísima importancia a eso, y si no las reescala me perderé información de la imagen...

Seguramente haya alguna manera más que decente de hacer esto, no es nada innovador desde luego :) pero dado mi nivel de newbie, no se si estoy diciendo estupideces, si estoy pasando por alto cosas básicas, bla bla bla... iré enterándome poco a poco.

Gracias por la ayuda de nuevo DriverOp.

Por torpedete

85 de clabLevel



Genero:Masculino  

chrome
Citar            
MensajeEscrito el 24 Abr 2012 12:25 pm
La propiedad background-size se encarga de eso, torpedete.

Me parece que tu miedo es que la imagen se distorsione al cambiar la relación de aspecto. Como es imposible tener todas las dimensiones posibles de una misma imagen me parece que tendrás que encontrar una solución de compromiso.

background-size admite unos valores especiales que son "contain" y "cover". Pero como una imagen vale más que mil palabras, te invito a que mires y leas esto (está en inglés):

http://www.css3.info/preview/background-size/

De ahí tú sabrás cuál es la mejor situación para tu caso.

A propósito, si quieres no tener problemas con el alto de los <div>s, mejor pon el fondo al tag <html>

Por DriverOp

Claber

2510 de clabLevel



 

opera
Citar            
MensajeEscrito el 24 Abr 2012 12:30 pm
Efectivamente, lo que mas me preocupa es la distorsión de la imagen junto con la pérdida de "información sensible" de los bordes de la imagen.

Voy a leer ahora mismo el link que me has puesto, muchísimas gracias por la ayuda, en serio que te lo agradezco.

Un saludo.

Por torpedete

85 de clabLevel



Genero:Masculino  

chrome
Citar            
MensajeEscrito el 24 Abr 2012 04:05 pm
no tengas miedo y ves probando... normalmente las imagenes se reescalan solas y suelen hacerlo bastante bien.. como imagen (original) con 900x600 suele ser un tamaño aceptable... ya que hoy en día no se suelen usar tamaños muy grandes. tal vez a 1200 pixels...

otro tema sería digamos la foto si es "panorámica", pero esto se rellenaría con un color de fondo, si lo aplicas.

cuando a las imagenes le das un porcentaje o una medida de ancho 'whidth' el alto te lo saca de forma proporcional.... sólo te lo distorsionaría si forzaras también el alto 'height'.

Por Silvestre_

391 de clabLevel

1 tutorial

 

"un simple aficionado", pero acepto propuestas de trabajo

firefox
Citar            
MensajeEscrito el 25 Abr 2012 12:24 pm
Cierto. Como dice Silvestre_ tienes que ponerte a probar. Depende mucho de la relación de aspecto de las imágenes que quieres de fondo y qué es aceptable para ti como distorsión.

Por DriverOp

Claber

2510 de clabLevel



 

opera
Citar            
MensajeEscrito el 25 Abr 2012 12:38 pm
Pues muchas gracias a los dos, con estos consejos probaré e intentaré sacarlo de la mejor manera.

Gracias!

Por torpedete

85 de clabLevel



Genero:Masculino  

safari

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.