Foros del Web » Creando para Internet » CSS »

Estirar fondo a un marco

Estas en el tema de Estirar fondo a un marco en el foro de CSS en Foros del Web. Buenas! Pues me he lanzado a diseñar una web para un proyectito mirando por internet y con la ayuda de lo poco que sé, pero ...
  #1 (permalink)  
Antiguo 05/02/2012, 07:21
Avatar de Mixigodo  
Fecha de Ingreso: julio-2008
Ubicación: Galicia
Mensajes: 10
Antigüedad: 15 años, 9 meses
Puntos: 0
Pregunta Estirar fondo a un marco

Buenas!
Pues me he lanzado a diseñar una web para un proyectito mirando por internet y con la ayuda de lo poco que sé, pero me he quedado un poquito atascado, a ver si me podéis echar una mano:

Tengo la web dividida en dos tablas horizontales. La superior es el menú, la que no necesitará actualizarse. Será la tabla de abajo la que cambie según lo que se seleccione en el menú (4 secciones sencillitas). El problema lo tengo con los fondos.

El fondo del marco inferior lo tengo con lo siguiente, para que se adapte a la resolución de pantalla del usuario que visita la página:

Código:
body {
	background-image: url(fondo.jpg);
	background-repeat: no-repeat;
	background-size: cover;
}
Con ese código consigo que el fondo se estire y ocupe toda la ventana del navegador. Pero sólo el fondo del marco inferior.
He creado otra imagen para el fondo del marco superior, pero para que coincida exactamente con la del inferior. La idea es que esta imagen se estire horizontalmente, pero que conserve su tamaño vertical, para que tenga exactamente el mismo tamaño que el marco y coincida con el otro fondo.

He probado con el mismo código de arriba, pero no me vale, porque cuando expando el navegador horizontalmente, se agranda la foto pero conservando sus proporciones. Esto es, también se expande o se contrae verticalmente y no coincide con el fondo del otro marco.

¿Alguna sugerencia? ¿Puedo hacer esto pero de otra manera? (por ejemplo si pudiese poner un marco transparente para que tenga el fondo del otro, o algo...)

Desde ya, muchísimas gracias, espero haberme explicado bien. He buscado pero no he encontrado nada, lo siento si ya estaba resuelto

EDITO: Eso todo lo estoy haciendo en el CSS y estoy trabajando en Dreamweaver.

Última edición por Mixigodo; 05/02/2012 a las 08:04
  #2 (permalink)  
Antiguo 05/02/2012, 12:53
Avatar de webosiris
Moderador egiptólogo
 
Fecha de Ingreso: febrero-2002
Ubicación: Luxor, Egipto
Mensajes: 10.725
Antigüedad: 22 años, 2 meses
Puntos: 998
Respuesta: Estirar fondo a un marco

número 1:
¿un marco? ¿really? ¿are you from the past?
eso se dejó de usar como hace, mínimo, 5-10 años.

número 2:
en vez de con cover, podrías probar con
Código CSS:
Ver original
  1. background-size: 100% 100%;

número 3:
esto es de css, no de html. muevo al foro correcto
__________________
Pasamos tus PSD a HTML

Pobre del que lo sabe todo, porque no tiene nada más que aprender ni razón para vivir. -
  #3 (permalink)  
Antiguo 05/02/2012, 14:40
Avatar de Mixigodo  
Fecha de Ingreso: julio-2008
Ubicación: Galicia
Mensajes: 10
Antigüedad: 15 años, 9 meses
Puntos: 0
Respuesta: Estirar fondo a un marco

Número 1: No sé mucho de diseño web, lo que pasa es que tengo bastante claro en mente lo que quiero y sólo se trata de llevarlo a cabo. Encontré eso en un tutorial de youtube y lo hice con un marco. ¿Puedes decirme otra forma de hacer algo parecido para que pueda buscar información de eso? He leído sobre iframes, pero he leído también que son más "cutrecillos".

Número 2: Eso que propones me funciona a medias:

- En el marco superior se sigue viendo la imagen y ya tiene un tamaño exacto que se estira a todo el marco. Sin embargo, en el inferior no sale la imagen, y es el mismo código pero diferente imagen. Esto no lo entiendo
- La imagen del marco superior tiene un tamaño de 1024x119, por lo que he puesto 119 píxeles al tamaño del marco. Sin embargo, en chrome necesito poner 140 mínimo, mientras que en firefox son suficientes 119. De nuevo, no entiendo esto. Por cierto, en casi todo el proceso la vista diseño de Dreamweaver no me muestra el resultado final bien.

Sinceramente, creo que volveré a empezar de nuevo con el diseño y probaré a hacer el menú de otra forma, porque creo que he contaminado mucho el código ya con tantas pruebas. Mi principal preocupación es adaptar la imagen de fondo a todos los tamaños, y que se vea siempre bien y completando la pantalla. Si consigo esto, podía incluso prescindir de los marcos y hacer eso de otra forma. ¿Alguna sugerencia de por donde tirar?

¡¡Muchas gracias de todas formas!!

Número 3: Cierto, disculpa. En cuanto hice la pregunta me puse a investigar y descubrí qué era exactamente CSS. Como he dicho, no sé demasiado de web. ¡Gracias, y disculpa las molestias!
  #4 (permalink)  
Antiguo 05/02/2012, 18:31
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 15 años, 2 meses
Puntos: 306
Respuesta: Estirar fondo a un marco

Hola
Para que una imagen de fondo se adapte a todos los tamaños aquí tienes un ejemplo, solo tienes que revisar el código fuente.
También tienes otro ejemplo, solo buscalo en menú de http://araudi.net

Saludos

PD: Manuales de Xhtml y Css puedes conseguir en www.librosweb.es
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--
  #5 (permalink)  
Antiguo 06/02/2012, 08:54
Avatar de Mixigodo  
Fecha de Ingreso: julio-2008
Ubicación: Galicia
Mensajes: 10
Antigüedad: 15 años, 9 meses
Puntos: 0
Respuesta: Estirar fondo a un marco

Muchas gracias C2am, probaré con la información dada en esos enlaces. Gracias también por los tutoriales, les echaré un vistazo a ver si no tengo que volver a molestaros :)
¡¡Muchas gracias!!

Etiquetas: background-size, marco, marcos, 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 23:52.