Mostrar imagen con redimensión como background

[Bier]

PREGUNTA 1:
Tengo una celda de 200x300 pixeles, y una foto de 400x600pixeles.

Deseo que la foto sea mostrada como background de la celda, pero redimensionada a fin de poderla mostrar completa.

¿Alguna guía al respecto?

Gracias anticipadas

[diamari]

Bueno con css3 utilizas

-moz-background-size:80px 60px; /* Firefox 3.6 */
background-size:80px 60px;

Pero lo mejor es chicarla manualmente para aliviar la carga de este ya que si solo la redimensionas aun esta cargando todo los 400x600pixeles.

[DanielRGB]

Prueba esto...

html {
background: url(../img/background.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
float: left;
}

[alexzdp]

width ->En número o %, Ancho de la tabla en píxeles o en % con respecto a la ventana del navegador.
height -> En número o %, Alto de la tabla en píxeles o en % con respecto a la ventana del navegador.
Con esto podas reducir la imagen de tamaño, mira haber si te sirve.

[NSD]

justo acabo de responder otro tema igual a este XD

Código HTML:

<div style="background:url(images/back.png) no-repeat; background-size:100%;"></div>
 

en tu caso en lugar de un div es una celda pero las propiedades son las mismas :)

eh aqui la solucion espero te sirva saludos

[furoya]

Hola todos.

Bier : qué bueno que alguien pregunte correctamente. La mejor respuesta es la que te dio diamari, porque el dato es que es CSS3, y con las propiedades ya puedes buscar sólo cómo funciona el resize de fondos y entenderlo con todos sus valores.
Aprovecho para dejarte otro tema donde no preguntaron tan bien, pero entre las interpretaciones que hubo estaba algo como lo que buscas, más completo, porque acá no se contempla al IE ni simulaciones con JS.

Ya que menciono esto último, también dejo un link a su ejemplo.

¿Como Configurar Automaticamente El tamaño De Una Imagen?

como hacer un fondo ajustable?

Hay mil más, pero es cuestión de buscar.

Edición :

Ahora que miro bien ... ¿había "PREGUNTA 2"?

[Bier]

Gracias a todos por su amable respuesta, analizaré todas las aportaciones, Gracias.


Estimad@ furoya,

Tienes razón, si había pregunta 2, solo que imaginé tener al menos la respuesta a la pregunta 1 y eliminé la 2.

Pregunta 2:

Tengo una celda de 200 ancho x 300 de alto.
Tengo una foto de 400 de ancho x 300 de alto.

Deseo poner la foto como background, con el alto no hay problema ya que es el mismo. Pero el ancho de la celda es 200 y el de la foto es 400, deseo que se muestre la parte central de la foto, es decir, del pixel 100 al 300 (centrada).

Gracias nuevamente

[kseso?]

la propiedad que busca es background-position

Quizás le venga bien este artículo sobre fondos
Ahí tiene un enlace al documento de la w3c que lo desarrolla.

[furoya]

Justamente. La idea de saber dónde encontrar la respuesta en vez de copiar y pegar es que al leer las propiedades para fondos te vas a topar —además de la que estás buscando— con otras que te pueden servir para más efectos.
Una vez que las conoces, empiezan a caer las ideas para usarlas.

Por eso en los artículos (serios) donde te muestran ejemplos hechos, siempre al pie vas a encontrar un link a la plana o al documento base de donde salió tal atributo o cual propiedad que te estén mostrando.