Repetir background

Jota_sk · #1 (**permalink**) 25/08/2009, 14:42

Me gustaria saber como puedo repetir la imagen de fondo solo x veces o repetirla hasta la mitad de la pagina

De momento tengo esto;

Código HTML:

body {
	margin:0;
	background-color:#666600;
	background-image:url(fondo.png);
	background-repeat:repeat-x;
	}

Gracias

alexk · #2 (**permalink**) 25/08/2009, 14:45

Jota_sk esto en CSS2 no es posible, ya que CSS no cuenta las veces que este "fondo" se repite... es mejor que crees un "div" una capa con el tamaño que deses o que consideres que debe tener dicho fondo y alli aplicar el resto de tu web en pocas palabras un "div" emulando a tu body con ese dichoso fondo chao y suerte!...

Jota_sk · #3 (**permalink**) 25/08/2009, 14:57

Ok, gracias, ya cree el div, ahora el problema es que la capa me sale correctamente pero el table que tengo me sale debajo del fin de la etiqueta div. Como puedo poner el div por debajo del table?

Os pongo una imagen para que veasi lo que quiero decir

Os dejo el codigo de la etiqueta div class="fondo", que es la que tiene la imagen

Código HTML:

.fondo {
	background-image:url(fondo.png);
	background-repeat:repeat-x;
	height:80px;
	width:50%;
	}

alexk · #4 (**permalink**) 25/08/2009, 15:06

mmm pon la url de tu sitio no consigo saber que es lo que quieres intenta con esto...

Código:

<div class="tu_fondo">
         <table>
             <tr> 
                  <td>                 
                          tu sitio
                  </td>
             </tr>
         </table>
</div>

chao y suerte!...

jomaruro · #5 (**permalink**) 25/08/2009, 15:10

Hola:

Mejor es que pongas todo tu código o una URL. Quizá sea más fácil de arreglar con CSS que crear una tabla para maquetar, ya que las tablas son para tabulación de datos.

Saludos.

Jota_sk · #6 (**permalink**) 25/08/2009, 15:50

Estoy trabajando en localhost. Aqui teneis la URL http://84.123.151.17/web/_Otros/Dicc...20Fulfulde%5D/

y el codigo, tienes unas 1860 lineas, pero os recorto casi todos los tr para que no sean tantas

Código HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>Diccionario</title>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <link rel="stylesheet" type="text/css" href="estilo.css">
</head>
<body bgcolor="#666600">
<div class="fondo"></div>
<div class="menu"><a href="#a">a</a><br><a href="#b">b</a><br><a href="#c">c</a><br><a href="#d">d</a><br><a href="#e">e</a><br><a href="#f">f</a><br><a href="#g">g</a><br><a href="#h">h</a><br><a href="#i">i</a><br><a href="#j">j</a><br><a href="#k">k</a><br><a href="#l">l</a><br><a href="#m">m</a><br><a href="#n">n</a><br><a href="#o">o</a><br><a href="#p">p</a><br><a href="#q">q</a><br><a href="#r">r</a><br><a href="#s">s</a><br><a href="#t">t</a><br><a href="#u">u</a><br><a href="#v">v</a><br><a href="#w">w</a><br><a href="#x">x</a><br><a href="#y">y</a><br><a href="#z">z</a></div>
<table class="header" align="center">
    <tbody>
        <tr> 
            <td><img src="diccionariodos.jpg" height="110" width="750"></td>
        </tr>
    </tbody>
</table>
<table class="contenido" border="1" cellpadding="1" cellspacing="0" align="center">
<tbody>
    <tr> 
        <td class="idioma">CASTELLANO</td>
        <td class="idioma">CATALAN</td>
        <td class="idioma">Frances</td>
        <td class="idioma">FULFULDE</td>        
    </tr>
    <tr id="d"> 
        <td class="palabra">
            Dátiles<br>
            De nada<br>
            Debajo<br>
            Dedo<br>
            Delante<br>
            Delgado<br>
            Dentro<br>
            Derecha<br>
            Desayuno<br>
            Descansar<br>
            Despacho<br>
            Despertador<br>
            Día<br>
            Diciembre<br>
            Diecinueve<br>
            Dieciocho <br>
            Dieciseis<br>
            Diecisiete<br>
            Dientes<br>
            Diez<br>
            Diferente<br>
            Difícil<br>
            Doce<br>
            Domingo<br>
            Dormir<br>
            Dos<br>
            Ducha
        </td>
        <td class="palabra">
            Dàtils<br>
            De res<br>
            Sota<br>
            Dit<br>
            Devant<br>
            Prim<br>
            Dins<br>
            Dreta<br>
            Esmorzar<br>
            Descansar<br>
            Despatx<br>
            Despertador<br>
            Dia<br>
            Desembre<br>
            Dinou<br>
            Divuit<br>
            Setze<br>
            Disset<br>
            Dents<br>
            Deu<br>
            Diferent<br>
            Difícil<br>
            Dotze<br>
            Diumenge<br>
            Dormir<br>
            Dos<br>
            Dutxa
        </td>
        <td class="palabra">
            Dates<br>
            Il n'y a pas de quoi<br>
            En dessous<br>
            Toe<br>
            Front<br>
            Fin<br>
            Au sein de<br>
            Droit<br>
            Petit déjeuner<br>
            Repos<br>
            Bureau<br>
            Alarme<br>
            Jour<br>
            Décembre<br>
            Dix-neuf<br>
            Dix-huit<br>
            Seize<br>
            Dix-sept<br>
            Teeth<br>
            Dix<br>
            Différents<br>
            Difficile<br>
            Douze<br>
            Dimanche<br>
            Dormir<br>
            Deux<br>
            Se doucher
        </td>
        <td class="palabra">
            Tamoro<br>
            Baragi<br>
            Leï<br>
            Hondu<br>
            Llesa<br>
            Djeudo<br>
            Lei<br>
            Jongo nyamo<br>
            Pummari<br>
            Mmottude<br>
            Biron<br>
            Reful<br>
            Nyaloma<br>
            Laya<br>
            Sappo e Djenaï<br>
            Sappo e Djetti<br>
            Sappo e Djegom<br>
            Sappo e Djedi<br>
            Ñiñe<br>
            Sapo<br>
            Manda<br>
            Yoi<br>
            Sappo e Didi<br>
            Alane<br>
            Damadé<br>
            Didi<br>
            Dusu
        </td>
    </tr>
</tbody>
</table>
</body>
</html>

y el codigo del css es el siguiente

Código HTML:

body {
	margin:0;
	background-color:#666600;
	}
.idioma {
	color:#FFF;
	background-color:#5f6402;
	font-family:Arial, Helvetica, sans-serif;
	text-align:center;
	width:253;
	font-weight:bold;
	font-size:14px;
	}
.header{
	width:760;
	border-width:0px;
	border-spacing:0px;
	border-collapse:collapse;
	}
.contenido{
	background-color:#b1bb04;
	border-color:#7a8103;
	width:760;
	border-width:0px;
	border-spacing:0px;
	border-collapse:collapse;
	}
.palabra {
	color:#000;
	font-family:Arial, Helvetica, sans-serif;
	text-align:center;
	width:253;
	font-size:14px;
	}
.fondo {
	background-image:url(fondo.png);
	background-repeat:repeat-x;
	height:80px;
	width:50%;
	}
.menu{
	text-align:center;
	margin-left:10px;
	position:fixed;
	text-transform:capitalize;
	}
.menu a{
	color:#FFF;
	text-decoration:none;
	}

Gracias

jomaruro · #7 (**permalink**) 25/08/2009, 16:07

Hola:

Más o menos lo que había intuido (algo voy aprendiendo

).

Primero, el div fondo en la posición que está y flotado a la izquierda, a continuación un div header (sustituyendo a la tabla) que contenga a la imagen.

Código:

<img height="110" width="750" src="diccionariodos.jpg"/>

tambien flotado a la izquierda, los dos con el mismo height

Ahora continúas con el div menu y el resto de la página como está (por no decirte que cambies la tabla por otro div).

Saludos.

alexk · #8 (**permalink**) 25/08/2009, 16:07

agregale esto a tu fondo...

Código:

.fondo {
	background-image:url(fondo.png);
	background-repeat:repeat-x;
	height:80px;
	left:0;
	margin-left:-370px;
	position:absolute;
	top:0;
	width:50%;
	}

pero se tapa tu "alfabeto" de la izquierda asi que a tu ".menu " dale un top de nose mmm 20%... o como gustes chao y suerte!...

Jota_sk · #9 (**permalink**) 25/08/2009, 16:17

muchas gracias he hecho lo que me ha hecho el usuario alexk, y lo que dice jomaruro lo hare otro dia, ahora solo quiero acabarlo. Muchas gracias, solucionado!

alexk · #10 (**permalink**) 25/08/2009, 16:19

de nada que bueno... chao y suerte

PD: en tu caso esta bien usar tablas para eso sirven

jomaruro · #11 (**permalink**) 25/08/2009, 16:27

Hola:

Cita:

Iniciado por alexk

PD: en tu caso esta bien usar tablas para eso sirven

Para... ¿posicionar una imagen?

Saludos.

alexk · #12 (**permalink**) 25/08/2009, 16:35

nop.... eso no yo digo todo lo de abajo... la tablota chao

jomaruro · #13 (**permalink**) 25/08/2009, 16:38

¡Ahh! ¡qué susto!

Saludos:

:adios.