Ahora en porcentajes

[enochap]

Hola a todos, os quería hacer una pregunta. Hasta ahora trabajaba con px y finalmente me he decantado por pasarme a % ya que parece ser que así tengo más posibilidades de que mi web sea algo más responsive.

Bien, el problema es que cuando yo quiero poner un texto o lo que sea sobre una imagen, lo que hago siempre es poner la imágen como fondo del div contenedor y así me deja escribir encima:

.ini_div_foto {
background: url('../img/foto.jpg') no-repeat;
width:100%;
}

Pero esa foto no se puede agrandar ni hacer más pequeña. se muestra tal cual es, o yo no he encontrado la forma de hacerlo. Al trabajar en % me gustaría que la foto ocupase el 100% del contenedor y eso lo puedo hacer con cualquier imagen que no sea el fondo de un div, pero no con estas...

Mi pregunta entonces es doble: Como poner que la imagen de fondo de un div se autoredimensione ??? o bien, como se hace para escribir texto encima de una imagen usando:

<img src="/img/foto.jpg">

Muchas gracias

[AngelKrak]

basta con poner estos codigos amigo ;)

HTML:

<span>Fondo HD</span>
<img src="http://angelkrak.blockpost.skn1.com/archivos/Fondos-HD-para-pc-auto.jpg" />
</div>

CSS:

span {
font-size: 24pt;
}
img {
width:100%;
}

demo:
http://codepen.io/AngelKrak/pen/MYBaYX

[fede5426]

No AngelKrak, lo que quiere es colocar el texto sobre la imagen como si estuviera de fondo.. o en su defecto hacer que la imagen de fondo se redimensione cambiando el tamaño de la ventana.

enochap lo único que se me ocurre es colocar el texto con posición absoluta, sinceramente desconozco si existe alguna propiedad CSS que permita que el fondo cambie su tamaño. Probaria con "background-size:cover" pero no se si obtendrías el resultado que esperas.

Saludos

[enochap]

Gracias Angel, pero en tu ejemplo, el texto está fuera de la foto y yo lo quería dentro, encima.

Gracias Fede, lo he conseguido con posicion absoluta y z-indez.

Un Saludo

[AngelKrak]

haaa no entendia, eso no es tan dificil amigo por eso le puse la etiqueta span al Texto por si habia algo asi jejeje xD

codigo actualizado, me imagino que asi es como lo querias jajaja xD
http://codepen.io/AngelKrak/pen/MYBaYX

[NueveReinas]

Te aconsejo poner la imagen de fondo en un DIV y entonces ir añadiéndole padding + contenido para ir ajustándolo.

Ejemplo: http://jsfiddle.net/uLLj7L3s/

[pzin]

Acostúmbrense a poner el código en el post. Si mañana desaparece algunos de esos playgrounds, a nadie más le va a servir los hilos, y la idea de a comunidad es que luego se puedan seguir consultando las dudas.