Foros del Web » Creando para Internet » CSS »

Fondo auto-dimensionable ._.

Estas en el tema de Fondo auto-dimensionable ._. en el foro de CSS en Foros del Web. Que tal a toda la comunidad! Recién estoy haciendo una página web con un amigo, hicimos una plantilla en PSD y luego intenté pasarla a ...
  #1 (permalink)  
Antiguo 23/03/2012, 15:41
Avatar de SoozaV  
Fecha de Ingreso: marzo-2012
Mensajes: 2
Antigüedad: 12 años, 1 mes
Puntos: 0
Fondo auto-dimensionable ._.

Que tal a toda la comunidad!

Recién estoy haciendo una página web con un amigo, hicimos una plantilla en PSD y luego intenté pasarla a HTML+CSS

La idea es que en un futuro, cuando ya quede cada cosa en su lugar, volverla una plantilla de Wordpress.

El problema es con el fondo, ya que en mi monitor se veía bien, hasta que mi amigo me dijo que desde el suyo se veian los lados cortados.

Como puedo solucionar eso y hacer que se ajuste al 100% del monitor, sin importar la resolución?

Les dejo el link: [URL="http://neoprit.com/"]http://www.neoprit.com/[/URL]

Código HTML:
<body>
<div id="main">
<div id="dr"></div>
<div id="df"></div>
     <div id="top"></div>
       <div class="contenido">
                 <div id="header">
                       <a href="la-verdadera-plantilla-xD.jpg"><img src="neoprit.png" alt="Néoprit" title="Se supone que debió haber quedado algo así LOL" /></a>
                 </div>
                 <ul id="menu">
                       <li><a href="#">Slide Show</a></li>
                       <li><a href="#">Submenu</a></li>
                       <li><a href="#">Perro</a></li>
                 </ul>
                 <div id="nav">
                     <ul>
                       <li><a href="#">Inicio</a></li>
                       <li><a href="#">Blog</a></li>
                       <li><a href="#">Trabajos</a></li>
                       <li><a href="#">Videos</a></li>
                       <li><a href="#">Contacto</a></li>
                     </ul>
                 </div>
       </div>  
</div>
<div id="footer">
     <div class="contenido">
     </div>
</div>
</body>
</html> 
y el CSS
Código:
body
{
	margin:0px;
	padding:0px;
	background:#8e0101 url(fondo.png) top no-repeat;
	color:#e4e4e4;
}
#dr
{
	position:absolute;
	top:120px;
	left:0;
	background:url(dr.png) no-repeat;
	width:321px;
	height:718px;
}
#df
{
	position:absolute;
	bottom:0;
	right:0;
	background:url(df.png) no-repeat;
	width:658px;
	height:414px;
}
#top
{
	margin:0 auto;
	height:28px;
	width:100%;
	background:#000;
}
.contenido
{
	width:968px;
	margin:0px auto;
	position:relative;
}
#header
{
	padding-top:20px;
}
  #2 (permalink)  
Antiguo 23/03/2012, 16:06
 
Fecha de Ingreso: marzo-2012
Mensajes: 10
Antigüedad: 12 años, 1 mes
Puntos: 1
Respuesta: Fondo auto-dimensionable ._.

prueba con:

#main {
margin-right: 0px;
margin-left: 0px;
}
  #3 (permalink)  
Antiguo 23/03/2012, 17:20
Avatar de SoozaV  
Fecha de Ingreso: marzo-2012
Mensajes: 2
Antigüedad: 12 años, 1 mes
Puntos: 0
Respuesta: Fondo auto-dimensionable ._.

Gracias x_aleprincess (: pero no me funcionó xD
encontré una buena solución en http://css-tricks.com (Se las recomiendo)
Para hacer el fondo auto-dimensionable, o ajustable al 100% del monitor, se pone este código al inicio del CSS:

html
{
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

Funciona en:
Safari 3+
Chrome
IE 9+
Opera 10+ (Opera 9.5 supported background-size but not the keywords)
Firefox 3.6+ (Firefox 4 supports non-vendor prefixed version)

Aquí el link original con la solución, y muchas posibles soluciones:

http://css-tricks.com/perfect-full-page-background-image/
  #4 (permalink)  
Antiguo 23/03/2012, 18:37
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 16 años, 10 meses
Puntos: 539
Respuesta: Fondo auto-dimensionable ._.

Si quiere una solucción más universal* mire este tema http://www.forosdelweb.com/f4/centra...3/#post4146018

*: entienda universal como mayor compatibilidad con navegadores y sus versiones.
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++

Etiquetas: contenido, html, 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 00:39.