estoy practicando CSS
y simplemente haciendo unos bordes, que son unos div con fondo que se repiten verticalmente y horizontalemente
por ej. tengo un div a la izq de la pantalla, que tiene 50px de ancho y le di 100% de alto
en el que esta a la izq. quiero que el fondo se repita solo en el eje y
pero que empice a repetirse 150px hacia abajo de limite superior del documento
pero aunque le asigne background-position: 0px 150px;
al tener background-repeat: repeat-y;
lo repite todo, lo unico que logro es desfasar el comienzo del fondo con respecto a la pantalla
pero yo quiero que se repita en y pero comience 150px abajo del limite superior
por lo que cambie la posición del div y lo baje 150px;
pero si hago al tener el div 100% de alto aparece el scroll vertical, y se me desfasa todo
dejo una capturas de lo que digo (se ve bien pero aparece el scroll)
y cuando muevo el scroll se desfasa todo
como puedo hacer para que el fondo de ese div empice a 150px de arriba y se repita en el eje y
o bajar el div 150px y que ese div tome el resto de altura del documento
los estilos en el CSS los defini asi
Código :
/* CSS Document */
body{
background-image:url(imagenes/fondo.jpg);
margin:0px;
}
#bordeizq{
background-image:url(imagenes/fondoizq.png);
background-repeat: repeat-y;
position:absolute;
left:0px;
top:150px;
width:50px;
height:100%;
}
#bordeaba{
background-image:url(imagenes/fondoaba.png);
background-position: bottom;
background-repeat: repeat-x;
position:absolute;
left:0px;
top:100%;
width:100%;
height:150px;
margin-top:-150px;
}
#bordeabader{
background-image:url(imagenes/fondoabader.png);
position:absolute;
top:100%;
left:100%;
margin-top:-252px;
margin-left:-233px;
width:233px;
height:233px;
}
#logo {
position:absolute;
top:29px;
left:0px;
width:100%;
text-align:right;
z-index:5;
}y en el .html tengo asi el codigo
Código :
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>bordes y fondos</title> <link href="estilos.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="bordeizq"></div> <div id="logo"><img src="imagenes/bluefrog.png"></div> <div id="bordeaba"></div> <div id="bordeabader"></div> </body> </html>
si no se entiende la duda la explico mejor
y si hay otros errores o cosas que deberian estar de otra forma definidas en los estilos diganlo nomas
sldos alejandro
