Foros del Web » Creando para Internet » CSS »

Repetir background

Estas en el tema de Repetir background en el foro de CSS en Foros del Web. 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; ...
  #1 (permalink)  
Antiguo 25/08/2009, 15:42
Avatar de Jota_sk  
Fecha de Ingreso: octubre-2008
Mensajes: 188
Antigüedad: 9 años, 2 meses
Puntos: 0
Repetir background

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
  #2 (permalink)  
Antiguo 25/08/2009, 15:45
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 5 meses
Puntos: 137
Respuesta: Repetir background

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!...
  #3 (permalink)  
Antiguo 25/08/2009, 15:57
Avatar de Jota_sk  
Fecha de Ingreso: octubre-2008
Mensajes: 188
Antigüedad: 9 años, 2 meses
Puntos: 0
Respuesta: Repetir background

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%;
	}

Última edición por Jota_sk; 25/08/2009 a las 16:03 Razón: Poner imagen
  #4 (permalink)  
Antiguo 25/08/2009, 16:06
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 5 meses
Puntos: 137
Respuesta: Repetir background

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!...
  #5 (permalink)  
Antiguo 25/08/2009, 16:10
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Repetir background

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.

  #6 (permalink)  
Antiguo 25/08/2009, 16:50
Avatar de Jota_sk  
Fecha de Ingreso: octubre-2008
Mensajes: 188
Antigüedad: 9 años, 2 meses
Puntos: 0
Respuesta: Repetir background

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
  #7 (permalink)  
Antiguo 25/08/2009, 17:07
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Repetir background

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.

  #8 (permalink)  
Antiguo 25/08/2009, 17:07
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 5 meses
Puntos: 137
Respuesta: Repetir background

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!...
  #9 (permalink)  
Antiguo 25/08/2009, 17:17
Avatar de Jota_sk  
Fecha de Ingreso: octubre-2008
Mensajes: 188
Antigüedad: 9 años, 2 meses
Puntos: 0
Respuesta: Repetir background

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!
  #10 (permalink)  
Antiguo 25/08/2009, 17:19
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 5 meses
Puntos: 137
Respuesta: Repetir background

de nada que bueno... chao y suerte

PD: en tu caso esta bien usar tablas para eso sirven
  #11 (permalink)  
Antiguo 25/08/2009, 17:27
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Repetir background

Hola:

Cita:
Iniciado por alexk Ver Mensaje
PD: en tu caso esta bien usar tablas para eso sirven
Para... ¿posicionar una imagen?

Saludos.

  #12 (permalink)  
Antiguo 25/08/2009, 17:35
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 5 meses
Puntos: 137
Respuesta: Repetir background

nop.... eso no yo digo todo lo de abajo... la tablota chao
  #13 (permalink)  
Antiguo 25/08/2009, 17:38
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Repetir background

¡Ahh! ¡qué susto!

Saludos:

:adios.
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 08:18.