div de fondo con imagen muy grande

Citar

Escrito el 19 Ene 2010 08:53 pm

hola buena estoy maquetando una pagina con css, y el cliente me ha pasado el diseño, la cual conlleva una imagen de fondo muy grande, el diseño en photoshop es a 2206x1519 y en el centro de este diseño tiene el recuadro donde iria el contenido de la pagina web, con un tamaño de 1024x1000, ¿como hago para poner un div de fondo con imagen muy grande y encima el div mas pequeño que seria la pagina web para 1024? Es que me aparece el scroll horizontal, pero hay que mover mucho el scroll para ver el div pequeño que contiene la teorica pagina web.No se si me explico bien, puedo pasar imagen o psd para que observen.Un saludo.

Por currodelatajadera

33 de clabLevel

Envíale un mensaje privado

Citar

Escrito el 19 Ene 2010 09:16 pm

debes definir el tamaño del sitio no se que tabn bueno sea que este tenga 2206 de ancho,! yo creo que debes tomar una decicion por ejemplo 1280 de ancho y ajustarla a este tamaño y luego optimizarla al mas no poder para que no se haga eterna la carga

Por jpcw

Claber

1715 de clabLevel

1 tutorial

Genero:Masculino

Envíale un mensaje privado Web

AlgoritmicBrainDesigner

@jpcw

Citar

Escrito el 19 Ene 2010 09:46 pm

Es que resulta ke el diseño se la hecho un diseñador grafico, y el kiere eso, pero es que no tengo ni idea de como meter una imagen inmensa en un div de fondo, que aparezca el scroll y al cargar esa web, dicho scroll salga en el centro de su barra horizontal, es que sino se veria la como desplazada ya que el div con el contenido de la pagina web estaria centrado y el div de fondo a un lado¿ te puedo pasar un psd o jpg para que lo veas? porque ahora mismo estoy bloqueado.

Por currodelatajadera

33 de clabLevel

Envíale un mensaje privado

Citar

Escrito el 20 Ene 2010 01:37 am

Deberías consultar las propiedades posibles para los fondos::
'background-image', 'background-repeat', 'background-position'...
Algo como lo siguiente, cambiando los valores 50% por el que necesites según sea tu imagen:

código css escribió:

body {
background: url(ruta.jpg) no-repeat 50% 50%;
}

Y sobre él colocar la caja (div) donde alojes los contenidos (haciendo uso de "position" y demás propiedades/valores asociados).

Un saludo

Por DvillB

118 de clabLevel

Envíale un mensaje privado

Citar

Escrito el 20 Ene 2010 09:44 am

Muchisimas gracias por responder, pero tengo una duda, si hago lo que me dices, al tener esa imagen tan grande, ¿se arregla el problema del scroll? es decir, el scroll horizontal saldra centrado? o cargara desplazado a un lado?
¿y porque aveces el scroll vertical no me aparece aun si la imagen no cabe en la ventana del navegador? un saludo.

Por currodelatajadera

33 de clabLevel

Envíale un mensaje privado

Citar

Escrito el 20 Ene 2010 01:38 pm

currodelatajadera escribió:

Muchisimas gracias por responder, pero tengo una duda, si hago lo que me dices, al tener esa imagen tan grande, ¿se arregla el problema del scroll? es decir, el scroll horizontal saldra centrado? o cargara desplazado a un lado?
¿y porque aveces el scroll vertical no me aparece aun si la imagen no cabe en la ventana del navegador? un saludo.

joder.... que te cuesta probar a ver que te Sale!? U_U

Por jpcw

Claber

1715 de clabLevel

1 tutorial

Genero:Masculino

Envíale un mensaje privado Web

AlgoritmicBrainDesigner

@jpcw

Citar

Escrito el 20 Ene 2010 09:00 pm

no hombre , no me cuesta nada, y menos cuando yo soy el interesado, he hecho esa pregunta antes de probar , por no dar mas el coñazo como novato que soy.Al reves, os estoy muy agradecido.Un saludo.

Por currodelatajadera

33 de clabLevel

Envíale un mensaje privado

Citar

Escrito el 21 Ene 2010 09:32 am

miren, acaba de colgar la muestra solo con la imagen de fondo, [url=http://www.tododesarrolloweb.es][/url] como veis a 1024x768 el "contenido" se veria centrado, pero no respecto a la imagen de fondo, ya que solo puedo desplazar hacia la derecha, este es el codigo css:
body{
margin:0px;
padding:0px;
background: url(imagenes/bgPagina.jpg) no-repeat 50% 0%;
}
la imagen que el cliente quiere es muy grande, y probando porcentajes puedo lograr centrar tambien imagen de fondo el problema, es cuando varie la resolución del navegador, que lo que en uno aparece centrado en otro no.Un saludo, y os recuerdo soy novato en css, tened paciencia :oops:

Por currodelatajadera

33 de clabLevel

Envíale un mensaje privado

Citar

Escrito el 21 Ene 2010 02:29 pm

Hola,

El diseño esta bueno, una de las cosas que yo intentaría, y creo que era parte de las cosas que te decían arriba es tener un fondo para la página, este fondo sería el encabezado, estaría alineado algo así: top center no-repeat.

Y como tu cliente no quiere cambiar la proporción del diseño, verá el encabezdo completo (que realmente solos serían las montañas) el usuario que tenga la resolución para verlo.

La idea se entiende mejor si te muestro un ejemplo, pasa con este sitio por ejemplo http://chirp.twitter.com/ y la imagen que utilizan de fondo.

Pienso que sería lo mejor.

Saludos,

Por hCanté

212 de clabLevel

1 articulo

Genero:Masculino

Envíale un mensaje privado Web

Guatemala

@hcante

Citar

Escrito el 21 Ene 2010 03:12 pm

prueba, analiza y adapta:

Código :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es-es">
<head>
<title>DvillB</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<style type="text/css">
html, body {width: 100%; height: 1519px; overflow: auto; background: url(http://www.tododesarrolloweb.es/imagenes/bgPagina.jpg) no-repeat center top;}
* html, * body { height: 100%; overflow:auto;}
* {margin:0; padding:0; outline: none; position: relative;}
#contenedor {width: 970px; margin: 320px auto 220px; background: #FFFFFF;}
#contenedor p {font-size: 1.5em; color: #444; margin-bottom: 1em;}
</style>

</head>
<body>
<div id="contenedor">
<p>Lorem ipsum dolor sit amet consectetuer fermentum tellus condimentum adipiscing Morbi. Tellus Curabitur eros lorem libero ullamcorper cursus tincidunt turpis ut a. Venenatis ac condimentum laoreet dui wisi eu tempus pretium elit orci. Sollicitudin felis Donec.</p>
<p>Nibh Integer condimentum pellentesque In id Cras Sed Vestibulum tortor eget. Lobortis nibh mauris turpis lobortis leo tempus eget id orci eu. Ipsum eros Suspendisse semper wisi quis elit consectetuer condimentum tortor.</p>
<p>Vitae Ut In Proin metus Nam laoreet urna id nec velit. Semper et In semper Duis quis aliquam sed risus dapibus eget. Sapien facilisis.</p>
<p>Suscipit volutpat egestas Cras adipiscing massa pretium Ut urna fermentum et. Convallis Aenean In montes Nam penatibus consectetuer nunc Nunc sapien nunc. Est id lacinia elit nunc porttitor orci faucibus nibh cursus molestie. </p>
<p>Convallis orci orci dapibus sit id Nam congue iaculis nibh ante. Lacus sed Nam montes interdum et vel enim tristique risus montes. Orci ipsum nec suscipit elit convallis fringilla iaculis et amet leo. Ut congue id Mauris eros neque neque a gravida vel consequat. Ut nunc dictum Cras habitasse neque Curabitur et volutpat nulla dolor. Pretium molestie justo.</p>
<p>Morbi quis eget et justo porttitor tortor ac sed odio amet. Condimentum ultrices In Donec libero dolor tincidunt consequat pretium convallis Nam. Purus purus neque enim adipiscing eros at tellus consectetuer Ut tellus. </p>
<p>Et elit ac Sed et Nulla magna et malesuada orci sagittis. Sit id lorem fermentum Integer id Quisque Phasellus et Curabitur orci. Consectetuer justo risus sed Cras Curabitur In tellus lorem pretium Morbi. Nibh molestie urna rutrum vitae pede urna id faucibus gravida nulla. Nisl libero senectus parturient at auctor.</p>
<p>Interdum et Vivamus orci et sodales mattis dolor auctor odio vestibulum. Orci Proin Curabitur mauris tincidunt ultrices libero orci quis Phasellus id. Cursus pellentesque Vestibulum sit quis sapien tempus odio facilisis eu ipsum. In mauris tristique In et condimentum dolor leo Curabitur id consequat. Dui amet euismod ultrices tortor odio tempus.</p>
<p>At nibh mollis a Integer mollis a ac nisl Donec sapien. Massa ac orci vel Phasellus sapien volutpat Vestibulum ligula.</p>
</div>
</body>
</html>

al conenedor le he puesto un fondo blanco para que veas el texto y un margen superior para que se coloque debajo de lo que supongo será el header.
Tu imagen pierde por los laterales en función de la anchura de la ventana, pero siempre se centra y el contenido se coloca sobre la "resma de papel". Siempre que el diseñador gráfico se haya molestado en ponerla centrada en su diseño (no lo verifiqué al píxel).

Saludos

Por DvillB

118 de clabLevel

Envíale un mensaje privado

Citar

Escrito el 21 Ene 2010 04:14 pm

ok, muchas gracias , lo voy a probar y a ver que tal.

Por currodelatajadera

33 de clabLevel

Envíale un mensaje privado

div de fondo con imagen muy grande

Escribe una respuesta rapida