Problema con el css de mi sitio y el body

chalnet · #1 (**permalink**) 27/09/2011, 11:12

que tal amigos tengo un problema con un blog que estoy desarrollando el problema es el siguiente, yo tengo un css adonde defino la imagen de fondo del body , adonde además le doy una posición y un tamaño fijo pero no me lo respeta, depende las resoluciones o si tiene mas agrandado la letra o mas alejado la imagen de fondo se achica y no respeta que tape toda la parte de atrás :(
Espero una ayuda y muchas gracias.
Este es mi css:

Prueben entren a mi blog: www.brianstanley.com.ar y haganle un acercamiento de pantalla

Código PHP:

  BODY{
        background: url("fondo.png"); height: 100%; width: 100%; 
        background-repeat: no-repeat;
        background-position: top center;
        background-attachment: fixed;
        font-family:arial;
        position: absolute;left: 0%; right: 0%;
        
    }
HR{
  border: 1;
  width: 80%;
  color:#E6E6E6;

    }
       
   #desarrollo{ 
  
   position: absolute; top: 23.5%; left: 22.3%;
   width: 70%;
   //height: 600%;
   overflow:scroll-x;
  //min-height: 400px;
//border: transparent;
border-bottom-color: red;
background-color: transparent;
/*background: url("fondo.png");
        background-repeat: no-repeat;
        background-position: top center;
        */


  }
   

   

   .izquierda{
       //border-right: 1px solid black;
    width: 17%;
    height: auto;

    position: absolute; top: 23.5%; left: 5%;
    
       }

         .atrasizq{
       //border-right: 1px solid black;

        
    width: 17%;
    height: 80%;

    position: absolute; top: 23.5%; left: 5%;
    
       }       
       
       .clearing{
      clear:both;
   }

       
       
       
       .header{
   
       
    position: absolute; top: 1%; left: 5%;
     border: 1px solid #d0d0d0;
     border-bottom-color: #EFF5FB;
    border-left-color: #EFF5FB; 
    width: 87%;
    height: 16%;
       }
       
           #header2{ position: absolute; top: 17%; left: 5%;
    width: 87%;
   height: 6%;
   border: 1px solid black;
border: 1px solid #d0d0d0;

  }   
       
       
       
        #siguiente{
            position:  absolute; top: 112%; left: 50%;
                        }       
       #atras{
            position:  absolute; top: 115.5%; left: 39.5%;
                        }  
                        
                        
                        #footer{
position: absolute; top: 95%;
                        }

DrFaust · #2 (**permalink**) 27/09/2011, 11:43

Código:

background: url("fondo.png"); height: 100%; width: 100%;

Acá está el problema. En esta línea estás definiendo la URL de la imagen de fondo, pero luego ponés un punto y coma, y a partir de entonces estás definiendo el ancho y el alto del elemento. En otras palabras, estás haciendo esto:

Código:

background: url("fondo.png");
height: 100%;
width: 100%;

Sacá los dos primeros punto y comas.

chalnet · #3 (**permalink**) 27/09/2011, 11:52

hice lo que me dijiste pero ahora no se me muestra la imagen :(
background: url("fondo.png") height: 40% width: 50%;

www.brianstanley.com.ar//estilos.css

ArturoGallegos · #4 (**permalink**) 27/09/2011, 12:39

compañero @DrFaust que dice que quiso decir?

@chalnet lo que tu buscas es la propiedad CSS3 background-size, has de tener en cuenta la incompatibilidad con los viejos navegadores

yo te recomendaría que en lugar de definir esa imagen como fondo lo coloques como parte del contenido

Código HTML:

Ver original<body><img src="fondo.png" alt="background" id="BgSite" /><div id="Sitio">el resto de tu sitio</div>

Código CSS:

Ver original#BgSite,#Sitio{width:100%;height:100%;position:absolute;top:0;left:0;z-index:-10;}
#Sitio{z-index:1;}

chalnet · #5 (**permalink**) 27/09/2011, 18:34

Cita:

Iniciado por Ag666

compañero @DrFaust que dice que quiso decir?

@chalnet lo que tu buscas es la propiedad CSS3 background-size, has de tener en cuenta la incompatibilidad con los viejos navegadores

yo te recomendaría que en lugar de definir esa imagen como fondo lo coloques como parte del contenido

Código HTML:

Ver original<body><img src="fondo.png" alt="background" id="BgSite" /><div id="Sitio">el resto de tu sitio</div>

Código CSS:

Ver original#BgSite,#Sitio{width:100%;height:100%;position:absolute;top:0;left:0;z-index:-10;}
#Sitio{z-index:1;}

lo voy a probar gracias :D