Foros del Web » Creando para Internet » HTML »

Imagen de fondo

Estas en el tema de Imagen de fondo en el foro de HTML en Foros del Web. Hola! Hace tiempo que no ingreso a este gran foro. Bueno mi consulta es la siguiente. Eh visto en muchas páginas, incluso en esta que ...
  #1 (permalink)  
Antiguo 27/03/2011, 19:32
 
Fecha de Ingreso: enero-2010
Ubicación: Bahía Blanca - Argentina
Mensajes: 116
Antigüedad: 7 años, 11 meses
Puntos: 1
Imagen de fondo

Hola! Hace tiempo que no ingreso a este gran foro.

Bueno mi consulta es la siguiente.

Eh visto en muchas páginas, incluso en esta que la parte superior (secciones) y la parte inferior (información), sea cual sea la resolución de pantalla, siempre ocupa toda la pantalla.

Si por ejemplo yo presiono Ctrl+la rueda del mouse hacia atrás, y voy quitando zoom, la página se achica y las partes antes mensionadas siguen ocupando todo el ancho de página.

Como se hace esto?

Perdon si ya contestaron esta duda, pero como no se como buscar, simplete hice el post.

Muchas gracias!

Saludos atte
Diegitoo
  #2 (permalink)  
Antiguo 27/03/2011, 21:07
Avatar de Naahuel  
Fecha de Ingreso: marzo-2011
Ubicación: localhost
Mensajes: 796
Antigüedad: 6 años, 9 meses
Puntos: 192
Respuesta: Imagen de fondo

Pues por defecto los elementos de bloque (DIV, P, etc) ocupan todo el ancho de su contenedor a menos que se les especifique un ancho específico o bien estén flotados o con algún posicionamiento diferente al static.

Si usas flotados o posicionamientos diferentes, podés usar width:100% y si el contenedor de tu elemento ocupa todo el ancho del navegador pues entonces se estirará con él.
Hay una propiedad CSS llamada min-width con la que podés especificar un ancho mínimo (útil para que tu página no se "aplaste" en un espacio muy angosto).

Todas estas son cuestiones de CSS, por lo que tu pregunta está en el lugar equivocado :P

¡Es algo realmente fácil! Te recomiendo leer manuales de introducción a CSS o algún tutorial, te aseguro que vas a aprender estos asuntos muy rápidamente.
__________________
nahueljose.com.ar
  #3 (permalink)  
Antiguo 27/03/2011, 21:28
Avatar de ZoroRoronoa  
Fecha de Ingreso: marzo-2011
Ubicación: California, USA
Mensajes: 823
Antigüedad: 6 años, 8 meses
Puntos: 116
Respuesta: Imagen de fondo

otra respuesta algo logica podria ser que esten especificados estos "ANCHOS" en porcentaje.

es decir, un 90%, si la pantalla mide 1000px, este ocupara 900px, si la pantalla la agrandas o haces zoom 3000px, este ancho sera de 2700px.

Y como dice mi compañero de arriba, es cuestion de CSS.
__________________
Programador jQuery & PHP
  #4 (permalink)  
Antiguo 27/03/2011, 23:03
 
Fecha de Ingreso: marzo-2011
Mensajes: 184
Antigüedad: 6 años, 8 meses
Puntos: 11
Respuesta: Imagen de fondo

Esta estructura te debería dar un ejemplo de lo que quieres, lo que hará será crear un bloque rojo que adaptará el ancho de la pantalla no importa la resolución que sea desplegando ese texto y uno azul que quedará a 800 pixeles no importa que se agrande o achique la pantalla.Saludos!

archivo.css
#container{
width:100%;
background:#ff0000;
color:#ffcc00;
}

#container2{
width:800px;
background:#0000ff;
color:#ffcc00;
}


archivo.html
<html>
<head>
<link href="archivo.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent varius gravida tellus, at consectetur tellus dapibus sed. Sed lobortis justo non urna dapibus pellentesque semper turpis fermentum. In nunc nisi, vehicula in eleifend at, tincidunt eu turpis. Nulla facilisi. Proin pharetra molestie quam, sed ultrices purus lacinia non. Donec venenatis rutrum diam at volutpat. Cras quis neque nunc. In suscipit condimentum velit, sed vehicula nisi pharetra at. Ut eu tincidunt dui. Mauris ullamcorper ante ornare sem vehicula eleifend. Suspendisse potenti. Sed vel nibh quis lacus sollicitudin placerat. Pellentesque ac quam leo, et elementum lacus. Aenean mauris risus, bibendum eget hendrerit eget, bibendum eu nisi.

Ut sed dictum augue. Vestibulum sit amet lorem nunc, quis blandit ipsum. Pellentesque egestas lacus nec turpis malesuada egestas. Cras a quam quis tellus lobortis dictum. Curabitur vitae elit ligula, ut vehicula nisl. Curabitur nec adipiscing ligula. Integer neque ipsum, euismod id consectetur vitae, dapibus quis libero. Mauris sollicitudin nunc sed orci eleifend vitae pellentesque lectus sollicitudin. Aliquam erat enim, pellentesque eget pharetra sed, tempus non nibh. Quisque commodo turpis quis mauris dapibus rhoncus. Nam augue libero, blandit quis sollicitudin nec, pretium quis diam.

Vestibulum imperdiet eros at ligula porta eget mollis turpis pharetra. Fusce aliquet nisl mi. Proin placerat aliquet augue nec dictum. Nullam varius lectus at neque egestas aliquet. Cras sed ipsum nec est dictum hendrerit. Vestibulum eu sagittis turpis. Nam ac nisl vel odio aliquam varius. Cras nisi purus, fringilla at suscipit nec, lobortis in nulla. Donec a felis est. Maecenas accumsan orci eu turpis sagittis porttitor. Morbi velit nisl, lacinia ac ullamcorper quis, tincidunt sed sem. Duis congue suscipit bibendum. Nulla pharetra elementum felis vel facilisis.

Maecenas eu urna arcu. Vivamus nec metus nunc. Ut aliquet placerat placerat. Donec faucibus purus tellus. Praesent a arcu non mi consectetur ultricies quis in dolor. Ut pretium, erat at ornare consequat, ipsum arcu interdum nisl, id tincidunt quam elit ut turpis. In gravida, dolor dictum volutpat varius, risus lorem lacinia metus, id mattis sem ante vel tortor. Ut eu lacus est, at iaculis diam. Nunc rhoncus imperdiet massa sit amet vulputate. Nulla accumsan vehicula arcu, vitae congue arcu vestibulum sed. Etiam non laoreet dolor. Suspendisse enim tellus, tincidunt consequat lacinia nec, vehicula eu mi. Cras volutpat placerat nisi ac semper.

Pellentesque euismod tristique velit vitae feugiat. Etiam sodales consectetur purus, iaculis dictum nibh facilisis sit amet. Nullam et augue est, venenatis facilisis lectus. Quisque nec magna dui, eu malesuada nunc. Nam diam nisl, semper non malesuada eget, scelerisque ac ligula. Phasellus tincidunt bibendum est, eu fermentum libero auctor a. In laoreet, libero quis molestie venenatis, nibh ante sodales nisl, ac tempor libero risus sed mauris. Etiam elementum interdum posuere. Nam quis mauris quam. Proin ut felis nisl, ac vehicula metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse blandit odio ut dolor gravida rhoncus. Cras nec pellentesque nulla. Mauris ut mi eu elit dictum adipiscing at at ligula. Fusce eget justo justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
</div>
<div id="container2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent varius gravida tellus, at consectetur tellus dapibus sed. Sed lobortis justo non urna dapibus pellentesque semper turpis fermentum. In nunc nisi, vehicula in eleifend at, tincidunt eu turpis. Nulla facilisi. Proin pharetra molestie quam, sed ultrices purus lacinia non. Donec venenatis rutrum diam at volutpat. Cras quis neque nunc. In suscipit condimentum velit, sed vehicula nisi pharetra at. Ut eu tincidunt dui. Mauris ullamcorper ante ornare sem vehicula eleifend. Suspendisse potenti. Sed vel nibh quis lacus sollicitudin placerat. Pellentesque ac quam leo, et elementum lacus. Aenean mauris risus, bibendum eget hendrerit eget, bibendum eu nisi.

Ut sed dictum augue. Vestibulum sit amet lorem nunc, quis blandit ipsum. Pellentesque egestas lacus nec turpis malesuada egestas. Cras a quam quis tellus lobortis dictum. Curabitur vitae elit ligula, ut vehicula nisl. Curabitur nec adipiscing ligula. Integer neque ipsum, euismod id consectetur vitae, dapibus quis libero. Mauris sollicitudin nunc sed orci eleifend vitae pellentesque lectus sollicitudin. Aliquam erat enim, pellentesque eget pharetra sed, tempus non nibh. Quisque commodo turpis quis mauris dapibus rhoncus. Nam augue libero, blandit quis sollicitudin nec, pretium quis diam.

Vestibulum imperdiet eros at ligula porta eget mollis turpis pharetra. Fusce aliquet nisl mi. Proin placerat aliquet augue nec dictum. Nullam varius lectus at neque egestas aliquet. Cras sed ipsum nec est dictum hendrerit. Vestibulum eu sagittis turpis. Nam ac nisl vel odio aliquam varius. Cras nisi purus, fringilla at suscipit nec, lobortis in nulla. Donec a felis est. Maecenas accumsan orci eu turpis sagittis porttitor. Morbi velit nisl, lacinia ac ullamcorper quis, tincidunt sed sem. Duis congue suscipit bibendum. Nulla pharetra elementum felis vel facilisis.

Maecenas eu urna arcu. Vivamus nec metus nunc. Ut aliquet placerat placerat. Donec faucibus purus tellus. Praesent a arcu non mi consectetur ultricies quis in dolor. Ut pretium, erat at ornare consequat, ipsum arcu interdum nisl, id tincidunt quam elit ut turpis. In gravida, dolor dictum volutpat varius, risus lorem lacinia metus, id mattis sem ante vel tortor. Ut eu lacus est, at iaculis diam. Nunc rhoncus imperdiet massa sit amet vulputate. Nulla accumsan vehicula arcu, vitae congue arcu vestibulum sed. Etiam non laoreet dolor. Suspendisse enim tellus, tincidunt consequat lacinia nec, vehicula eu mi. Cras volutpat placerat nisi ac semper.

Pellentesque euismod tristique velit vitae feugiat. Etiam sodales consectetur purus, iaculis dictum nibh facilisis sit amet. Nullam et augue est, venenatis facilisis lectus. Quisque nec magna dui, eu malesuada nunc. Nam diam nisl, semper non malesuada eget, scelerisque ac ligula. Phasellus tincidunt bibendum est, eu fermentum libero auctor a. In laoreet, libero quis molestie venenatis, nibh ante sodales nisl, ac tempor libero risus sed mauris. Etiam elementum interdum posuere. Nam quis mauris quam. Proin ut felis nisl, ac vehicula metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse blandit odio ut dolor gravida rhoncus. Cras nec pellentesque nulla. Mauris ut mi eu elit dictum adipiscing at at ligula. Fusce eget justo justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
</div>
</body>
</html>

__________________
“Un estómago vacío, es un mal consejero.” Albert Einstein

Reflexiones, humor gráfico, chistes, Deporte, Consejos y tips
  #5 (permalink)  
Antiguo 28/03/2011, 00:14
 
Fecha de Ingreso: enero-2010
Ubicación: Bahía Blanca - Argentina
Mensajes: 116
Antigüedad: 7 años, 11 meses
Puntos: 1
Respuesta: Imagen de fondo

No se porque, pero supuse que algo de relación con CSS tenia.

Lo de poner el ancho en porcentaje, me había olvidado.

Entonces me pregunto lo siguiente, si yo tengo las secciones (arriba) y la información (abajo) , ej: con fondo negro, a la hora de maquetear la pagina con un ancho ej: 1024 px (e insertarla en una tabla y luego centrarla),el resto, el cual debe ocupar toda la pantalla (secciones y información), la coloco en otras tablas (a continuación [izq y der] de la pagina central) , y le pongo de anchode 100%, va a ocupar siempre toda la pantalla ?


Espero que me hayan entendido, jeje.

Muchas gracias!

Saludos atte
Diego M.Gelós
  #6 (permalink)  
Antiguo 28/03/2011, 08:23
 
Fecha de Ingreso: marzo-2011
Mensajes: 119
Antigüedad: 6 años, 9 meses
Puntos: 9
Respuesta: Imagen de fondo

Hola

si usas porcentajes eso se ira ajustando dependiendo el tamaño de la pantalla y tambien puedes combinar pixeles y porcentajes .
  #7 (permalink)  
Antiguo 28/03/2011, 08:35
 
Fecha de Ingreso: marzo-2011
Mensajes: 184
Antigüedad: 6 años, 8 meses
Puntos: 11
Respuesta: Imagen de fondo

Lo más probable es que sea así, pero lo ideal es probarlo, si se puede en IE y firefox mejor.
__________________
“Un estómago vacío, es un mal consejero.” Albert Einstein

Reflexiones, humor gráfico, chistes, Deporte, Consejos y tips
  #8 (permalink)  
Antiguo 29/03/2011, 00:55
 
Fecha de Ingreso: enero-2010
Ubicación: Bahía Blanca - Argentina
Mensajes: 116
Antigüedad: 7 años, 11 meses
Puntos: 1
Respuesta: Imagen de fondo

Muchas gracias, por todas las respuestas!

Pueden cerrar el post!

Saludos atte
Diego M.Gelós

Etiquetas: fondo
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 10:46.