Redimensionar imagen en backgroung-image

[mdromed]

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

[mariomon17]

Se puede hacer con CSS 3.

http://www.w3.org/TR/css3-background/#background-size

[ArturoGallegos]

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 ñ.ñ

[mariomon17]

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...

[Kurozaki]

Iniciado por Ag666

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

[ArturoGallegos]

Iniciado por mariomon17

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

[mariomon17]

Iniciado por Ag666

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!

[ArturoGallegos]

Iniciado por mariomon17

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

[Kurozaki]

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.

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