Foros del Web » Creando para Internet » CSS »

Redimensionar imagen en backgroung-image

Estas en el tema de Redimensionar imagen en backgroung-image en el foro de CSS en Foros del Web. Hola. Sabeis si se puede poner un widht y height a una imagen que sea background de una capa? Es decir, quiero poner como background ...
  #1 (permalink)  
Antiguo 25/01/2011, 14:11
Avatar de mdromed  
Fecha de Ingreso: septiembre-2009
Mensajes: 389
Antigüedad: 8 años, 2 meses
Puntos: 8
Redimensionar imagen en backgroung-image

Hola.
Sabeis si se puede poner un widht y height a una imagen que sea background de una capa?
Es decir, quiero poner como background una imagen pero que se vea redimensionada como background a la medida que yo le ponga.
Se podria decir que busco un width y height para la propiedad background-image de css.

¿Existe?
¿Se puede hacer con javascript o css?

Gracias
  #2 (permalink)  
Antiguo 25/01/2011, 17:27
 
Fecha de Ingreso: noviembre-2009
Mensajes: 846
Antigüedad: 8 años, 1 mes
Puntos: 34
Respuesta: Redimensionar imagen en backgroung-image

Se puede hacer con CSS 3.

http://www.w3.org/TR/css3-background/#background-size
  #3 (permalink)  
Antiguo 25/01/2011, 17:43
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 5.823
Antigüedad: 9 años, 9 meses
Puntos: 951
Respuesta: Redimensionar imagen en backgroung-image

con css3 no hay compatibilidad en muchos navegadores lo mas adecuado seria colocar la imagen y con position y z-index colocarla abajo de tu contenido ñ.ñ
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #4 (permalink)  
Antiguo 26/01/2011, 09:41
 
Fecha de Ingreso: noviembre-2009
Mensajes: 846
Antigüedad: 8 años, 1 mes
Puntos: 34
Respuesta: Redimensionar imagen en backgroung-image

Yo lo haria con CSS 3, esa propiedad es compatible con la mayoria de navegadores hoy en dia.
-moz-background-size:
-webkit-background-size:
etc...

Eso si, olvidate de IE, pero eso siempre...
  #5 (permalink)  
Antiguo 26/01/2011, 10:27
Avatar de Kurozaki  
Fecha de Ingreso: diciembre-2010
Ubicación: Con mi Zanpakutou (Colima, MEX).
Mensajes: 175
Antigüedad: 7 años
Puntos: 9
Respuesta: Redimensionar imagen en backgroung-image

Cita:
Iniciado por Ag666 Ver Mensaje
con css3 no hay compatibilidad en muchos navegadores lo mas adecuado seria colocar la imagen y con position y z-index colocarla abajo de tu contenido ñ.ñ
ps para olvidarme de IE, prefiero y comparto la idea de mi compañero.
Coloca la imagen (como imagen), es decir, en el html, colocala <img src="" etc etc />

y con CSS como dice, dale las propiedades adecuadas (posicion y z-index para que quede abajo).

Aqui te dejo unos ejemplos de nuestro amigo Kseso?

http://css.devillasbuenas.es/fondo-100/1-fondo-100.html
http://css.devillasbuenas.es/fondo-100/2-fondo-100.html

Saludos
__________________
Diseñador y Desarrollador web :)
  #6 (permalink)  
Antiguo 26/01/2011, 11:19
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 5.823
Antigüedad: 9 años, 9 meses
Puntos: 951
Respuesta: Redimensionar imagen en backgroung-image

Cita:
Iniciado por mariomon17 Ver Mensaje
Yo lo haria con CSS 3, esa propiedad es compatible con la mayoria de navegadores hoy en dia.
-moz-background-size:
-webkit-background-size:
etc...

Eso si, olvidate de IE, pero eso siempre...
los atributos -> -moz-background-size y -webkit-background-size
no pertenecen propiamente al CSS3, solo son etiquetas experimentales de los navegadores, la propiedad para el CSS3 es -> background-size: (eje X) (eje Y);

por ejemplo background-size: 100% 100%;

el dato lo saque de aquí ->
http://www.css3.info/preview/background-size/
http://www.w3.org/TR/css3-background...ackground-size
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #7 (permalink)  
Antiguo 26/01/2011, 12:34
 
Fecha de Ingreso: noviembre-2009
Mensajes: 846
Antigüedad: 8 años, 1 mes
Puntos: 34
Respuesta: Redimensionar imagen en backgroung-image

Cita:
Iniciado por Ag666 Ver Mensaje
los atributos -> -moz-background-size y -webkit-background-size
no pertenecen propiamente al CSS3, solo son etiquetas experimentales de los navegadores
Claro, por eso las puse! si pones las tres (las dos experimentales y la del CSS3) te aseguras que funcione en ¿todos? (Chrome y Opera, Firefox, Safari) excepto IE.

IE como sabreis, no cumple los standares ni los test de compatibilidad ni llegando al 40%. Habria que buscar haber si hay algun hack para esa propiedad en IE, pero ya te digo a mi me ha dado muchos dolores de cabeza este explorador, es (y no lo digo yo) "el demonio de internet".

Un saludo!
  #8 (permalink)  
Antiguo 26/01/2011, 12:51
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 5.823
Antigüedad: 9 años, 9 meses
Puntos: 951
Respuesta: Redimensionar imagen en backgroung-image

Cita:
Iniciado por mariomon17 Ver Mensaje
Claro, por eso las puse! si pones las tres (las dos experimentales y la del CSS3) te aseguras que funcione en ¿todos? (Chrome y Opera, Firefox, Safari) excepto IE.

IE como sabreis, no cumple los standares ni los test de compatibilidad ni llegando al 40%. Habria que buscar haber si hay algun hack para esa propiedad en IE, pero ya te digo a mi me ha dado muchos dolores de cabeza este explorador, es (y no lo digo yo) "el demonio de internet".

Un saludo!
Como a todo mundo IE es el peor y el que mas dolores de cabeza provoca, en mi caso por IE6 ya no me preocupo y prácticamente deje de dar soporte salvo que el cliente lo solicite....

pero vamos el background puede llegar a ser una pieza importante del sitio por lo que no puedo o no debo dejar de lado a IE

por lo mismo en casos como el del compañero que necesita aplicar un tamaño prefiero agregar una imagen al inicio del body
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #9 (permalink)  
Antiguo 26/01/2011, 21:59
Avatar de Kurozaki  
Fecha de Ingreso: diciembre-2010
Ubicación: Con mi Zanpakutou (Colima, MEX).
Mensajes: 175
Antigüedad: 7 años
Puntos: 9
Respuesta: Redimensionar imagen en backgroung-image

Cita:
Iniciado por Ag666
pero vamos el background puede llegar a ser una pieza importante del sitio por lo que no puedo o no debo dejar de lado a IE

por lo mismo en casos como el del compañero que necesita aplicar un tamaño prefiero agregar una imagen al inicio del body
Ya lo he dicho..., comparto tu respuesta de la img :)
Esperar a ver que nos cuenta el creador del tema.
Cita:
ps para olvidarme de IE, prefiero y comparto la idea de mi compañero.
Coloca la imagen (como imagen), es decir, en el html, colocala <img src="" etc etc />

y con CSS como dice, dale las propiedades adecuadas (posicion y z-index para que quede abajo).

Aqui te dejo unos ejemplos de nuestro amigo Kseso?

http://css.devillasbuenas.es/fondo-100/1-fondo-100.html
http://css.devillasbuenas.es/fondo-100/2-fondo-100.html

Saludos
__________________
Diseñador y Desarrollador web :)

Etiquetas: imagenes
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:24.