Imagen de fondo en páginas web [HTML]

Archivado
Bueno, sé que en el título no se ve muy claro lo que quiero pero os cuento lo que necesito.

Tengo una página web con una imagen que tiene X resolución. Me pregunto si es posible que todos los visitantes puedan ver el fondo bien... Por ejemplo si pongo con mi resolución yo lo veré bien pero si entra cualquier otra persona con un monitor más grande lo verá en mosaico o en blanco...

Tengo que decir que no tengo mucha experiencia sé HTML y algo más pero no mucho (Suelo pillar las cosas nuevas con bastante rapidez) . El programa con el que ando es el Dreamweaver. Estaré esperando vuestras recomendaciones para ver cómo lo puedo hacer.

Muchas gracias [bye]
Eso se hace con CSS. Yo cuando uso una imagen de fondo suele ser de dimensiones pequeñas. Por ejemplo, si para el header quieres poner una imagen de 150px de alto y que el ancho varie según la resolución de cada uno tendrías que hacer lo siguiente con CSS:

background-image:url("imagen.png");
background-repeat: repeat-x;


Cargaría la imagen como fondo y después con "repeat-x" la repetiría horizontalmente hasta el final de la pantalla. Con "repeat-y" haría lo mismo pero verticalmente, es decir, hacia abajo.

En tu caso, si quieres usarlo para toda la pantalla tendrías que usar solament "repeat", esto haría que la imagen se repitiese en todas direcciones.

Mira, aquí tienes un ejemplo y además puedes probar como va: http://www.w3schools.com/cssref/tryit.a ... nd-repeaty
Alecs7k escribió:Eso se hace con CSS. Yo cuando uso una imagen de fondo suele ser de dimensiones pequeñas. Por ejemplo, si para el header quieres poner una imagen de 150px de alto y que el ancho varie según la resolución de cada uno tendrías que hacer lo siguiente con CSS:

background-image:url("imagen.png");
background-repeat: repeat-x;


Cargaría la imagen como fondo y después con "repeat-x" la repetiría horizontalmente hasta el final de la pantalla. Con "repeat-y" haría lo mismo pero verticalmente, es decir, hacia abajo.

En tu caso, si quieres usarlo para toda la pantalla tendrías que usar solament "repeat", esto haría que la imagen se repitiese en todas direcciones.

Mira, aquí tienes un ejemplo y además puedes probar como va: http://www.w3schools.com/cssref/tryit.a ... nd-repeaty


Ok muchas gracias trastearé por ésa página xD
Con ese consejo se vería la imagen repetida, no? Y si pone un fondo de una resolución X no es posible mantener esa imagen pero de manera que se adapte al tamaño de la pantalla del visitante? Algo así como un "reescalado" de la imagen...
VozdeLosMuertos escribió:Con ese consejo se vería la imagen repetida, no? Y si pone un fondo de una resolución X no es posible mantener esa imagen pero de manera que se adapte al tamaño de la pantalla del visitante? Algo así como un "reescalado" de la imagen...


Pero si haces eso la imagen acabará pixelada. Si pones una imagen con una resolución de 1024x768 y entra alguien con una pantalla panorámica verá la imagen totalmente estirada.

También cabe la posibilidad de poner una imagen de dimensiones colosales y así se ajustará a cualquier pantalla...pero ocupa mucho, tarda más en cargar...y no es una buena práctica.
Alecs7k escribió:
VozdeLosMuertos escribió:Con ese consejo se vería la imagen repetida, no? Y si pone un fondo de una resolución X no es posible mantener esa imagen pero de manera que se adapte al tamaño de la pantalla del visitante? Algo así como un "reescalado" de la imagen...


Pero si haces eso la imagen acabará pixelada. Si pones una imagen con una resolución de 1024x768 y entra alguien con una pantalla panorámica verá la imagen totalmente estirada.

También cabe la posibilidad de poner una imagen de dimensiones colosales y así se ajustará a cualquier pantalla...pero ocupa mucho, tarda más en cargar...y no es una buena práctica.

Ya... bueno, yo pensaba en algo vectorial, seria ligero y escalable... o no es posible porque los navegadores se pegan con ese formato? (hablo desde la ignorancia)
si quieres algo en condiciones dreamweaver no es la mejor solucion
si quieres la imagen centrada y que no se repita utiliza

background-image: url('imagen.png');
background-repeat: no-repeat;
background-position: center center;


si lo que quieres es utilizar una imagen para cada resolución solo con "media queries" lo que hará a tu sitio "responsivo".

saludos
7 respuestas
Archivado
Volver a General