div con imagen

baxi2990 · #1 (**permalink**) 23/07/2009, 16:21

hola amigos tengo un problemita, quiero poner una capa con una parte de la imagen de un pergamino que se repita en Y, tengo esto pero se ve de lo mas feo

Código:

#lateral-d{ background:url(images/right_top.gif) repeat-y; height:500px; width:250px; margin-left:10px; margin-right:10px; padding-top::20px; float:right;}

la imagen, es como la parte superior de esta

http://www.osmtj.org/Secciones/Infor...ino_chinon.jpg

la idea es que no e vea cuando se repite la imagen agradesco la ayuda.

kseso? · #2 (**permalink**) 23/07/2009, 16:56

Cita:

la idea es que no se vea cuando se repite la imagen agradesco la ayuda.

¿podrías explicar mejor qué es lo que quieres hacer?

baxi2990 · #3 (**permalink**) 24/07/2009, 08:47

Mi imagen, la que repito en Y es esta

http://s3.subirimagenes.com:81/priva...88righttop.gif

el resultado es este

http://s3.subirimagenes.com:81/priva...89lateral1.jpg

mi pregunta es, si hay alguna forma de que se mire como esta imagen que encontre

http://s3.subirimagenes.com:81/priva...70301logro.jpg

sin que se vea como se repite la imagen agradesco la ayuda.

kseso? · #4 (**permalink**) 24/07/2009, 10:04

Mira a ver si en este ejemplo ves cómo hacerlo. La imagen del cuerpo central está hecha a la carrera y sin cuidar los detalles, por eso la parte derecha hace algo de feo. Pero eso es una cuestión de diseño gráfico, no de css.

Código html:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
<head>
<title>Kseso? jugando con css </title>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
<style type="text/css">
* {margin:0;padding:0; border:0; outline:none; position: relative;}
 
#contenedor{
width:250px;
margin: 0 auto;
background: url(http://s3.subirimagenes.com:81/privadas/previo/thump_570288righttop.gif) no-repeat;
overflow: hidden;
}
 
#header {
width: 100%;
height: 25px;
background: url(http://s3.subirimagenes.com:81/privadas/previo/thump_570288righttop.gif) no-repeat;
font-size: 1.4em;
color: #030;
text-transform: uppercase;
font-family: serif;
text-align: center;
}
#cuerpo{
background: url(http://img43.imageshack.us/img43/6701/cuerpoc.jpg) repeat-y;
padding: 0 5px;
}
#cuerpo p {
font-size: 1.2em
font-family: san-serif;
color: #600;
}
#pie {
background: url(http://img32.imageshack.us/img32/6260/piewxg.jpg) no-repeat;
height: 25px;
font-size: 1em
font-family: san-serif;
color: #300;
text-align: right;
padding-top: 7px;
}
</style>
</head>
<body>
<div id="contenedor">
<div id="header">
hola mundo
</div>
<div id="cuerpo">
<p>el contenido del cuerpo se aloja aquí, podría ser sólo texto o contener alguna imagen</p>
<p> bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</p>
<p>Añadir más texto</p>
</div>
<div id="pie">
Fin
</div>
</div>
</body>
</html>

Un saludo

baxi2990 · #5 (**permalink**) 24/07/2009, 10:22

Exactamente lo que queria, agradesco tu ayuda kseso?