Foros del Web » Creando para Internet » CSS »

Problema con fondo

Estas en el tema de Problema con fondo en el foro de CSS en Foros del Web. Teng este problema, tengo un fondo, pero solo sale el fondo a mitad de pagina y la otra mitad sale blanca aqui esta el codigo ...
  #1 (permalink)  
Antiguo 22/06/2010, 15:12
 
Fecha de Ingreso: mayo-2010
Mensajes: 185
Antigüedad: 7 años, 7 meses
Puntos: 2
Problema con fondo

Teng este problema, tengo un fondo, pero solo sale el fondo a mitad de pagina y la otra mitad sale blanca aqui esta el codigo y una imagen:

Imagen:




style.css

Código PHP:
* {
    
margin0padding0;
}
body {
    
text-aligncenter;
    
font12px Verdana;
    
color#000000;
    
backgroundurl(images/fondo3.pngno-repeat 0 0;
}
{
    
color#000000;
}
a:hover {
    
color#000000;
}
img {
    
border0;
}

.break {
    
font-size0;
    
width0height0;
    
clearboth;
}
.
alignleft {
    
floatleft;
    
margin4px 10px 5px 0;
}
.
alignright {
    
floatright;
    
margin4px 0 5px 10px;
}
.
aligncenter {
    
text-aligncenter;
}
.
hidden {
    
displaynone;
}
.
noimage img {
    
displaynone;
}

/** BEGIN wrapper **/
#wrapper {
    
width970px;
    
marginauto auto;
    
text-alignleft;
    
padding-bottom20px;
}
/** END wrapper **/

/** BEGIN header **/
#header {
    
height158px;
    
backgroundurl(images/navigation.pngrepeat-x 0 bottom;
}
    
#header h1 {
        
floatleft;
        
font-size0;
        
padding40px 15px 44px;
    }
        
#header h1 a {
            
displayblock;
            
width435pxheight34px;
            
backgroundurl(images/logo.pngno-repeat 0 0;
            
text-indent: -9999px;
        }
    
#header .ad {
        
floatright;
        
padding-top30px;
    }
    
#header ul {
        
list-style-typenone;
        
floatleft;
    }
        
#header ul li {
            
floatleft;
            
font-size0.9em;
            
font-weightbold;
            
text-transformuppercase;
            
padding-right2px;
            
backgroundurl(images/divider.pngno-repeat right 0;
        }
        
#header ul li a {
            
displayblock;
            
text-decorationnone;
            
padding13px 12px 14px;
        }
        
#header ul li a:hover {
            
color#ffffff;
            
backgroundurl(images/active.pngrepeat-x 0 0;
        }
    
#header form {
        
floatright;
        
width219pxheight30px;
        
backgroundurl(images/search.gifno-repeat 0 0;
        
margin5px;
    }
        
#header input {
            
border0;
            
font-size1em;
            
font-familyVerdana;
            
width210px;
            
background-colortransparent;
            
margin8px 4px;
        }
        
#header button {
            
displaynone;
        }
/** END header **/

/** BEGIN body **/
#body {
    
color#808080;
    
background#ffffff url(images/sidebar.gif) repeat-y right 0;
    
padding10px 0;
}
/** END body **/

/** BEGIN content **/
#content {
    
width730px;
    
floatleft;
    
        
}
    
#content .post {
        
clearboth;
        
padding10px 20px;
    }
    
#content .first {
        
padding-top0;
    }
        
#content .post .l {
            
floatleft;
            
width200px;
            
font-size0.9em;
            
color#292929;
            
padding-top10px;
        }
            
#content .post .l img {
                
width200pxheight200px;
                
margin-bottom15px;
            }
            
#content .post .l a {
                
text-decorationnone;
            }
        
#content .post .r {
            
floatright;
            
width450px;
        }
        
#content h2 {
            
font-size2.5em;
            
margin-bottom15px;
            
color#292929;
        
}
            
#content h2 a {
                
text-decorationnone;
            }
        
#content p {
            
line-height1.3em;
            
margin-bottom10px;
        }
        
#content ul, #content ol {
            
list-style-positioninside;
            
margin-bottom10px;
        }
        
#content li {
            
line-height1.3em;
        }
        
#content h3, #content h4, #content h5, #content h6 {
            
font-size1.2em;
            
margin-bottom5px;
        }
        
#content blockquote {
            
padding10px 10px 0;
            
background-color#eeeeee;
            
border-width1px 0;
            
border-stylesolid;
            
border-color#e0e0e0;
            
margin-bottom10px;
        }
        
#content .details {
            
backgroundurl(images/details.gifrepeat-x 0 0;
            
floatleft;
            
font-size0.9em;
            
padding10px;
            
border-width0 1px;
            
border-stylesolid;
            
border-color#B5B5B5;
        
}
            
#content .details a {
                
text-decorationnone;
                
displayblock;
                
floatleft;
            }
            
#content .details a.link1 {
                
padding-right10px;
                
border-right1px solid #D6D6D6;
            
}
            
#content .details .link2 a {
                
padding-left10px;
                
border-left1px solid #ffffff;
            
}
        
#content .details2 {
            
font-size0.9em;
            
padding10px 0;
        }
            
#content .details2 a {
                
text-decorationnone;
            }
    
#content .postnav {
        
clearboth;
        
padding25px 20px 0;
    }
        
#content .postnav a {

            
text-decorationnone;
            
font-weightbold;
            
font-size0.9em;
        }
    
#content h2.title {
        
font-size0.9em;
        
text-transformuppercase;
        
padding10px 20px;
    }
/** END content **/

/** BEGIN sidebar **/
#sidebar {
    
width220px;
    
floatright;
    
    
}
    
#sidebar .about {
        
padding0 10px 10px;
    }
        
#sidebar .about img {
            
border3px solid #ffffff;
            
floatleft;
            
margin4px 5px 5px 0;
        }
        
#sidebar .about p {
            
font-size0.9em;
            
color#292929;
        
}
    
#sidebar h2 {
        
font-size0.9em;
        
text-transformuppercase;
        
backgroundurl(images/navigation.pngno-repeat 0 0;
        
color#ffffff;
        
padding10px;
        
border-bottom1px solid #B7B7B7;
        
border-top1px solid #ffffff;
    
}
    
#sidebar ul {
        
list-style-typenone;
        
padding10px;
        
border-top1px solid #ffffff;
    
}
        
#sidebar ul li {
            
font-size0.9em;
            
padding6px 0 6px 16px;
            
backgroundurl(images/bullet.gifno-repeat 2px 10px;
        }
        
#sidebar ul li a {
            
color#292929;
            
font-weightbold;
        }
/** END sidebar **/

/** BEGIN footer **/
#footer {
    
background-color#CCCCCC;
    
color#292929;
    
font-size0.9em;
    
padding10px;
}
    
#footer a {
        
color#808080;
    
}
/** END footer **/

/** BEGIN miscellaneous **/
#comments {
    
padding10px;
}
    
#comments a {
        
text-decorationnone;
    }
    
#comments h2 {
        
font-size1.3em;
    }
    
#comments p {
        
margin-bottom10px;
        
line-height1.6em;
    }
    
#comments form {
        
padding0 10px;
    }
    
#comments form p {
        
margin-bottom5px;
    }
        
#comments form input {
            
margin-right5px;
        }
        
#comments form input, textarea {
            
border1px solid #cccccc;
            
font-size0.9em;
            
font-familyVerdana;
            
padding4px;
            
background-position4px 4px;
            
background-repeatno-repeat;
        }
        
#comments form input {
            
width260px;
            
border1px solid #cccccc;
        
}
        
#comments form textarea {
            
width350px;
            
padding4px 4px !important;
            
border1px solid #cccccc;
        
}
        
#comments form button {
            
border1px solid #a0a0a0;
            
font-size1em;
            
font-familyVerdana;
            
padding2px 6px;
        }
    .
commentdetails {
        
margin-top25px;
    }
    .
commentauthor {
        
margin-bottom5px !important;
        
font-weightbold;
    }
    .
commentdate {
        
font-size0.8em;
        
margin-bottom5px;
        
color#909090;
    
}
    .
required {
        
color#ff0000;
    
}
h2.title {
    
font-size1em !important;
    
text-transformuppercase;
    
padding10px;
    
color#565656;
}
.
notfound {
    
padding40px;
}
    .
notfound h2 {
        
font-size18px;
        
font-weightnormal;
        
margin-bottom10px;
    }
/** END miscellaneous **/

/** BEGIN wordpress 2.7 comments **/
#comments ol {
    
list-style-typenone;
    
clearboth;
    
padding0 10px 10px;
    
margin0;
}
    
#comments .buffer {
        
padding0 10px 10px;
    }
    
#comments h2 {
        
padding-left!important;
        
padding-bottom20px !important;
    }
    
#comments ol li {
        
margin-bottom10px;
    }
    
#comments ol li ul li {
        
border1px solid #e0e0e0;
        
padding10px;
    }
    
#comments ol li .avatar {
        
floatright;
    }
    
#comments ol li .comment-author {
        
    
}
        
#comments ol li .comment-author .fn {
            
font-weightbold;
            
font-size1.2em;
        }
    
#comments ol li .comment-meta {
        
font-size0.9em;
        
color#999999;
        
margin5px 0 10px;
    }
    
#comments ol li .reply {
        
font-size0.9em;
        
font-weightbold;
        
padding-bottom10px;
    }
    
#comments .children {
        
list-style-typenone;
    }
#comments .navigation {
    
padding0 10px 20px;
    
font-size0.9em;
}
    
#comments .navigation a {
        
color#999999;
        
padding3px 8px;
        
border1px solid #cccccc;
    
}
    
#comments .navigation a:hover {
        
color#000000;
        
border-color#000000;
        
text-decorationnone;
    }
#comments .says {
    
displaynone;
}
/** END wordpress 2.7 comments **/ 
  #2 (permalink)  
Antiguo 22/06/2010, 15:48
Avatar de Calizman
Organiza competencias CSS
 
Fecha de Ingreso: octubre-2008
Ubicación: Ciudad de Guatemala, Guatemala
Mensajes: 1.122
Antigüedad: 9 años, 2 meses
Puntos: 83
Respuesta: Problema con fondo

Saludos!

Supongo que el fondo del que hablamos está en las propiedades de body no? En ese caso reemplaza esto:

Código CSS:
Ver original
  1. body {
  2.     text-align: center;
  3.     font: 12px Verdana;
  4.     color: #000000;
  5.     background: url(images/fondo3.png) no-repeat 0 0;
  6. }

Por esto:

Código CSS:
Ver original
  1. body {
  2.     text-align: center;
  3.     font: 12px Verdana;
  4.     color: #000000;
  5.     background: url(images/fondo3.png) repeat 0 0;
  6. }

Hasta Luego!
__________________
[ Mi Sitio Personal ]
"La felicidad no es una estacion de llegada... Es un modo de viajar"
Tom Schreiter
  #3 (permalink)  
Antiguo 22/06/2010, 16:16
Avatar de masterojitos  
Fecha de Ingreso: julio-2008
Ubicación: Lima Callao Chucuito
Mensajes: 1.931
Antigüedad: 9 años, 4 meses
Puntos: 105
Respuesta: Problema con fondo

te aconsejo mirar este aporte que informa sobre como hacer el background full page

Suerte
__________________
Atte. MasterOjitos :ojotes:
Todo sobre Programación Web
Las ultimas tendencias en Efectos y Recursos Web: MasterOjitos Blog
  #4 (permalink)  
Antiguo 22/06/2010, 21:41
 
Fecha de Ingreso: mayo-2010
Mensajes: 185
Antigüedad: 7 años, 7 meses
Puntos: 2
Respuesta: Problema con fondo

gracias men, ya leí el documento y gracias tambien calizman esta bien, pero si quiero que el fondo este fijo y solo se baje la web, hagan de cuenta tengo un fondo de 1200 x 800 pero no quiero que se repita, ni que quede en blanco como lo hago?
  #5 (permalink)  
Antiguo 22/06/2010, 22:38
 
Fecha de Ingreso: mayo-2010
Mensajes: 185
Antigüedad: 7 años, 7 meses
Puntos: 2
Respuesta: Problema con fondo

ya lo resolvi gracias!!
  #6 (permalink)  
Antiguo 22/06/2010, 22:52
Avatar de Calizman
Organiza competencias CSS
 
Fecha de Ingreso: octubre-2008
Ubicación: Ciudad de Guatemala, Guatemala
Mensajes: 1.122
Antigüedad: 9 años, 2 meses
Puntos: 83
Respuesta: Problema con fondo

Saludos!

Un fondo de 1200 x 800? No crees que eso hará que tarde demasiado el tiempo de carga del sitio web? Digo... Y las personas que tengan una resolución de 1024 x 768? O las que tengan una de 1400 × 1050? o 1600 × 1024? Definitivamente, el tener un fondo de 1200 x 800 sin que se repita, no es una buena opcion.

Hasta Luego!
__________________
[ Mi Sitio Personal ]
"La felicidad no es una estacion de llegada... Es un modo de viajar"
Tom Schreiter

Etiquetas: 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 20:03.