¿Cómo hace esta web para poner un fondo y que solo se repita el inicio?

Kromikos · #1 (**permalink**) 08/04/2011, 04:55

Hola chicos, mirad.

Hablo de esta web: www.peliculasid.com

Tiene esta imagen de fondo: http://img.peliculasid.com/imagenes/fondo.png

Pero claro, sólo se repite una vez, para el título y demás, pero luego la tercera parte del fondo se hace infinito.

¿Cómo se hace esto, para crear un fondo en tres partes, pero tener el final infinito como en esa web?

Es que si yo hago un documento en blanco, y pongo esa imagen de fondo,se repite el fondo todo el rato, va saliendo el trozo negro de nuevo.

Un saludo y muchas gracias.

fishdesign · #2 (**permalink**) 08/04/2011, 05:38

Se hace un repeat-y (horizontal) de esa imagen a lo largo de la pantalla.
Luego la parte de abajo, si te fijas es un color plano, así que en el body pones un background-color: color; de manera que se unirá la parte de arriba con todo el fondo del contenido.
Así que realmente eso que ves que se hace "infinito" no es más que el color de fondo de la web hecho en CSS.

La web tomará su ancho y finalmente hay otra capa para el footer, que es simplemente un div negro.

Un saludo

Kromikos · #3 (**permalink**) 08/04/2011, 06:32

Cita:

Iniciado por fishdesign

Se hace un repeat-y (horizontal) de esa imagen a lo largo de la pantalla.
Luego la parte de abajo, si te fijas es un color plano, así que en el body pones un background-color: color; de manera que se unirá la parte de arriba con todo el fondo del contenido.
Así que realmente eso que ves que se hace "infinito" no es más que el color de fondo de la web hecho en CSS.

La web tomará su ancho y finalmente hay otra capa para el footer, que es simplemente un div negro.

Un saludo

Ostras, no lo sabía.

Entonces cómo hago para que sólo se repita de ancho?

Es que uso FrontPage, y no veo ninguna opción de esas

fishdesign · #4 (**permalink**) 08/04/2011, 07:14

Disculpa, acabo de ver que en el anterior post puse repeat-y, pero la repetición horizontal es repeat-x

Lo puedes hacer con CSS.

.fondo{background: url(/images/fondo.png) repeat-x; height: 300px;}

Te recomiendo encarecidamente que no uses programas como FrontPage o Dreamweaver para maquetar mediante las opciones del programa. No acaba dando buenos resultados.

Es mejor leerte algun tutorial de html y css y escribirlo directamente. Es más fácil de lo que puede parecer en un principio.

Un saludo

Kromikos · #5 (**permalink**) 08/04/2011, 07:20

Cita:

Iniciado por fishdesign

Disculpa, acabo de ver que en el anterior post puse repeat-y, pero la repetición horizontal es repeat-x

Lo puedes hacer con CSS.

.fondo{background: url(/images/fondo.png) repeat-x; height: 300px;}

Te recomiendo encarecidamente que no uses programas como FrontPage o Dreamweaver para maquetar mediante las opciones del programa. No acaba dando buenos resultados.

Es mejor leerte algun tutorial de html y css y escribirlo directamente. Es más fácil de lo que puede parecer en un principio.

Un saludo

Pero ese código lo añado dentro de una etiqueta que se llame

<style type="text/css">
</style>

o qué?

Es que tan solo necesito eso del fondo.

Un saludo y gracias por tu paciencia

fishdesign · #6 (**permalink**) 08/04/2011, 07:36

Cita:

Iniciado por Kromikos

Pero ese código lo añado dentro de una etiqueta que se llame

<style type="text/css">
</style>

o qué?

Es que tan solo necesito eso del fondo.

Un saludo y gracias por tu paciencia

Si, ahí mismo.

Luego entre el <body></body> metes el
<div class="fondo">
//Aquí el contenido de la cabecera
</div>

2bropy · #7 (**permalink**) 02/04/2013, 21:09

como hago para que se repita la imagen de fondo de la cabecera y el footer?? solo eso.. como creo el css para mi pagina en html? y donde lo copio o como deberia de copiarlo?

C2am · #8 (**permalink**) 02/04/2013, 21:15

Hola 2bropy.
Es mejor que crees un nuevo tema, y que aclares mejor, y que muestres que tienes hasta el momento.
Sobre las preguntas que haces, creo que está claro más arriba.
www.librosweb.es busca el de introduccion a css.