Entrar

¿Cómo sobreponer un título a una fotografía?

Luciérnaga · · Solicitar retirada
Bien, primero me sitúo, estoy haciendo mis pinitos de novato y me topo con el título del mensaje.
He leído todas las páginas del manual CCTW (gracias Jorgens) varias veces, he abierto un hosting (Razy) y tengo colgado la página del manual, y estoy "intentando" crear una página web personal ... y me encuentro en un punto que quisiera poner un párrafo o título encima de una foto publicitaria de modo que se vean los dos (la foto y el texto), la foto quedaría como fondo y el texto (p.e. en color blanco) para destacarlo y que fuese transparente ..., no sé si me explico y/o me "pillen" la idea.
El código que tengo puesto es el siguiente:

index.html
.....
<div id="cabecera">
<div id="logotipo">
<img src="objetos/logojofen5.png" width="97px" height="226px" alt="Haz click aquí para volver a la página de inicio">
</div>
<div id="publicidad">
<img src="objetos/mapspainsldos.jpg" width="695px" height="226px">
</div>
</div>
<div id="navegacion">Barra de Navegación</div>
.....

estilos.css
.....
#cabecera {background-color:white ; border-left:black 1px solid ; border-right:black 1px solid ; height:228px}
#logotipo {background-color:white ; width:97px ; height:226px ; margin-left:2px ; margin-top:2px ; float:left}
#publicidad {background-color:white ; width:695px ; margin-top:2px ; margin-right:2px ; float:right}
#navegacion {background-color:pink ; border:black 1px solid ; float:center}
.....

En el manual no encuentro la forma de solventar el problema. Y en el foro, francamente, no sé como buscarlo.
Serían tan amables de sacarme del atolladero ... gracias. Luci.
ricky · · Solicitar retirada
Agrega la imagen como fondo de capa asi:
#publicidad {width:695px ; margin-top:2px ; margin-right:2px ; float:right;background-image: url(ruta)}
y quitala del archivo html
Luciérnaga · · Solicitar retirada
Muchas gracias por las respuestas, pero ... quedo boquiabierto con lo de la caja transparente ...
Ya puestos como podría conseguir una transparencia de la foto (o gráfico) de entre un 65% y un 70% sin que mermara la intensidad del título ...
Lo conseguido es lo siguiente:

index.html
<div id="publicidad">
<ul>
<h1>Bienvenidos a MAP SPAIN, S.L.</h1>
</ul>
</div>


estilos.css
#publicidad {width:695px ; height:226px ; margin-top:2px ; margin-right:2px ; float:right ; background-image:url(objetos/mapspainsldos.jpg)}
#publicidad h1 {font-weight:bold ; font-size:30px ; margin-top:100px}

Saludetes ;)
lantiga · · Solicitar retirada
Bueno luci dos cosa:

1. la etiqueta <ul></ul> se suele utilizar para párrafos; no para titulos .Y su función es la de listar o hacer un listado.

2.Si pones un <h1></h1> para títulos esta genial ese h1 ya posee de por si un tamaño predefinido de texto; con lo cual la propiedad CSS font-weight:bold,que sirve para resaltar un texto sobraría,(pero es solo mi punto de vista).


En cuanto a las transparencias seria un cosa así:

filter:alpha(opacity=65);

opacity:0.65;

también puedes probar con

filter:alpha(opacity=70%);

opacity:0.70;

De hecho puedes juguetear con los valores hasta que quede con quieres.
Luciérnaga · · Solicitar retirada
Bien, muchas gracias lantiga ...
Veamos, si pero no ... agregando al final de la línea los valores filter:alpha(opacity=XX) ; opacity:0.XX consigo una transparencia, sí ... pero no es exactamente la idea que tengo para hacer, ¿porqué?, pues lo que consigo es una transparencia total (incluído el título) y no es lo que tengo pensado.
La transparencia solo para el fondo (o foto) si es genial pero para el título no, a éste (el título) lo deseo tener resaltado, firme, visual y destacado sobre el resto, y ya poder verlo (visualizarlo) como si fuera una bandera ondeando sobre el viento ya sería la reostia.
En fin, ya veremos al final como sale todo ese invento .... gracias amigos por ayudarme. Luci.