[SOLUCIONADO] duda en porcentajes fixed

rascabuchitos · #1 (**permalink**) 25/06/2013, 15:01

hola amigos
tengo esto

Código CSS:

Ver originalwidth: 100%;
height:500px;
background-image:url(images/6.jpg);
background-color:#666;
background-position:center top;
background-repeat:no-repeat;
background-attachment: fixed;

mi consulta es porque el height cuando lo pongo en 100% no es aceptado?
y porque hay un fondo blanco alrededor de la imagen... no quiero ponerle color sino que deseo que la imagen misma lo abarque, como se llama la tecnica que me permitiria hacerlo?

gracias

#2 (**permalink**) 25/06/2013, 15:20

Hola rascabuchitos,

Podrías poner tu código HTML? Así nos será más fácil averiguar tu error. Gracias.

Un saludo,
Leo

EDITO: Tu elemento DIV tiene elementos hijos con contenido o bien con su atributo height establecido?

rascabuchitos · #3 (**permalink**) 25/06/2013, 15:24

Código HTML:

Ver original<?php require('facebook/fbmain.php'); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
    .main{
        margin:0 auto; 
        width: 100%;
        height:500px;
        background-image:url(images/6.jpg);
         background-color:#666;
    background-position:center top;
    background-repeat:no-repeat;
    background-attachment: fixed;
    }
    .btn_conecta{
        width: 180px;
        margin: 0px auto;
        padding: 300px 0 0 0;
    }
</style>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
</head>
 
<body>
<?php require('facebook/fbjs.php'); ?>
<div class="main">
    <div class="btn_conecta">
        <input type="button" value="Conectate al Facebook" onclick="FBLogin();" />
    </div>
</div>
</body>
</html>

#4 (**permalink**) 25/06/2013, 15:35

Acá está la solución: http://jsfiddle.net/HsBXW/

Paso a explicarte el motivo por el cual no te tomaba el height al 100% y tenías el espacio blanco alrededor:

Pregunta 1:

Cita:

porque el height cuando lo pongo en 100% no es aceptado?

Respuesta: Esto se debe a que el elemento padre de div.main al que le asignás la altura al 100% (body) no estaba situado al 100%. Por ende, sólo ocupaba lo que el browser había dispuesto para body, en este caso en función del contenido.

Para solucionarlo, basta con poner:

Código:

html, body { height: 100%; }

Pregunta 2:

Cita:

porque hay un fondo blanco alrededor de la imagen

Respuesta: Esto se debe a que los navegadores disponen de su propia hoja de estilos denominada User Agent Stylesheet. Esta hoja de estilos, tiene sus propias reglas CSS. Una de ellas es establecer el margen del body a 8px (por lo menos en Chrome que es el browser que siempre uso).

Por tal motivo, para eliminar este margen uno debe "resetear" esos estilos. Cómo hacerlo? Podés hacerlo en el mismo código CSS donde se aplican tus estilos generales o bien en una hoja de estilo aparte (ojo que tendrás un acceso al servidor más) a la que podemos llamar reset.css

En mi caso, tengo el código comentado que correspondería al reset.css como

/* Reset CSS */

Y los valores que he puesto son los siguientes:

Código:

body, div, input {
    margin: 0;
    padding: 0;
}

Un saludo,
Leo!

rascabuchitos · #5 (**permalink**) 25/06/2013, 16:09

genial leo
https://webdeveloper.pe/facebook/

ahora a editar....
muchas gracias...