Foros del Web » Creando para Internet » CSS »

Ahora en porcentajes

Estas en el tema de Ahora en porcentajes en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 02/03/2015, 10:39
 
Fecha de Ingreso: julio-2012
Ubicación: Ripollet
Mensajes: 80
Antigüedad: 11 años, 8 meses
Puntos: 1
Ahora en porcentajes

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
  #2 (permalink)  
Antiguo 02/03/2015, 18:24
Avatar de AngelKrak  
Fecha de Ingreso: noviembre-2014
Mensajes: 917
Antigüedad: 9 años, 4 meses
Puntos: 91
Respuesta: Ahora en porcentajes

basta con poner estos codigos amigo ;)

HTML:
Cita:
<span>Fondo HD</span>
<img src="http://angelkrak.blockpost.skn1.com/archivos/Fondos-HD-para-pc-auto.jpg" />
</div>
CSS:
Cita:
span {
font-size: 24pt;
}
img {
width:100%;
}
demo:
http://codepen.io/AngelKrak/pen/MYBaYX
  #3 (permalink)  
Antiguo 02/03/2015, 19:20
Avatar de fede5426  
Fecha de Ingreso: diciembre-2014
Ubicación: Córdoba
Mensajes: 446
Antigüedad: 9 años, 3 meses
Puntos: 208
Respuesta: Ahora en porcentajes

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
  #4 (permalink)  
Antiguo 03/03/2015, 02:55
 
Fecha de Ingreso: julio-2012
Ubicación: Ripollet
Mensajes: 80
Antigüedad: 11 años, 8 meses
Puntos: 1
Respuesta: Ahora en porcentajes

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
__________________
Kike
  #5 (permalink)  
Antiguo 03/03/2015, 08:55
Avatar de AngelKrak  
Fecha de Ingreso: noviembre-2014
Mensajes: 917
Antigüedad: 9 años, 4 meses
Puntos: 91
Respuesta: Ahora en porcentajes

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
  #6 (permalink)  
Antiguo 07/03/2015, 19:33
Avatar de NueveReinas  
Fecha de Ingreso: septiembre-2013
Ubicación: No tan Buenos Aires
Mensajes: 1.101
Antigüedad: 10 años, 6 meses
Puntos: 145
Respuesta: Ahora en porcentajes

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/
  #7 (permalink)  
Antiguo 08/03/2015, 03:44
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 7 meses
Puntos: 2114
Respuesta: Ahora en porcentajes

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.
__________________
(:

Etiquetas: html, porcentajes, responsive, todo
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 10:18.