poner imagen de fondo o fondo de color a un texto?

00israel · #1 (**permalink**) 08/03/2012, 03:42

Quiero ponerle fondo a un texto, pero solo al texto que seleccione.

Es decir si quisiera ponerselo a una palabra solo, pues que pudiera hacerlo.

Y me doy cuenta que siempre me mete el fondo a toda la linea de texto

¿es posible hacer esto?

00israel · #2 (**permalink**) 08/03/2012, 05:23

he puesto este codigo, pero solo me muestra un fondo en lugar de los 4 distintos que deberia de mostrarme:

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Documento sin título</title>
<style type="text/css">
.texto {
	font-family: "Courier New", Courier, monospace;
	font-size: 16px;
	color: #000;
	background-image: url(fondo2.gif);
	background-repeat: no-repeat;
}
.texto-2 {
	font-family: "Courier New", Courier, monospace;
	font-size: 16px;
	color: #000;
	background-repeat: no-repeat;
	background-image: url(fondo.gif);
}
.texto-3 {
	font-family: "Courier New", Courier, monospace;
	font-size: 16px;
	color: #000;
	background-repeat: no-repeat;
	background-image: url(fondo3.gif);
}
.texto-4 {
	font-family: "Courier New", Courier, monospace;
	font-size: 16px;
	color: #000;
	background-repeat: no-repeat;
	background-image: url(fondo4.gif);
}
</style>
</head>

<body>
 <p class="texto">&nbsp; diseño 1 
 <br /> <span class="texto-2">&nbsp;</span>&nbsp;diseño 2
 <br /> <span class="texto-3">&nbsp;</span>&nbsp;diseño 3
 <br /> <span class="texto-4">&nbsp;</span>&nbsp;diseño 4</p>
</body>
</html>

ima_creste · #3 (**permalink**) 08/03/2012, 05:37

Hola

En principio debería de mostrarte diferentes fondos en esos espacios en blanco

Si metes color, te muestra todo OK:
texto {
font-family: "Courier New", Courier, monospace;
font-size: 16px;
color: #000;
background-image: url(fondo2.gif);
background-repeat: no-repeat;
}
.texto-2 {
font-family: "Courier New", Courier, monospace;
font-size: 16px;
color: #000;
background-repeat: no-repeat;
background-image: url(fondo.gif);
background-color:red;
}
.texto-3 {
font-family: "Courier New", Courier, monospace;
font-size: 16px;
color: #000;
background-repeat: no-repeat;
background-image: url(fondo3.gif);
background-color:blue;
}
.texto-4 {
font-family: "Courier New", Courier, monospace;
font-size: 16px;
color: #000;
background-repeat: no-repeat;
background-image: url(fondo4.gif);
background-color:yellow;
}

Por tanto el problema puede venir porque no repites la imagen, o pork la estes posicionando fuera del SPAN...

De todos modos, si pones una URL para revisar código fuente ayudaría bastante, por que sino es como buscar aguja en un pajar

Saludos

00israel · #4 (**permalink**) 08/03/2012, 05:45

gracias ima, pero no hay url, es una prueba que estoy haciendo para una idea.

la imagen esta dentro del span como has visto en el codigo. Y he hecho otra prueba repitiendo la imagen y nada tampoco.

Yo tambien he probado a ponerle distintos fondos de color como has hecho tu y eso si funciona. pero una imagen no.

no se porque?

furoya · #5 (**permalink**) 08/03/2012, 17:42

Yo veo los span con su imagen de fondo y rellenados con un espacio. Todo sobre la imagen del div que los contiene.

¿Qué navegador estás usando?. No hay manera de que eso no se vea. Si estuvieses intentando darles un ancho no funcionaría, pero lo haces con un caracter. Tal vez no estoy entendiendo el problema.

Intentaste llamar a esas imágenes como fondo de documento? Así descartamos que estén mal escritas.