Syprog, vamos a ir redondeando cosas y conceptos porque si no vamos a descarrilar.
Una imagen como elemento en si mismo, puede ser redimensionada, si a la imagen de tu ejemplo (2048 x 1536) la presento como
<img src="dibujopotadapg2.jpg" width="100" height="100" alt="">
por ahora no me detengo a hacer un análisis de lo que implica cargar una imágen de 292 KB como fondo de algo
Ahora que una imagen como fondo (background) de algún elemento
NO puede ser redimensionada con o sin CSS. A lo suma podrás hecer que se repita o no. vertical y/u horizontalmente para que complete el espacio del elemento en cuestión, en caso de ser la imagen de mayores dimensiones que el elemento, slo verás un fragmento de la imagen. si bien por defecto la imagen aparece como fondo a partir de las cooredenadas top(arriba)0px left(izq.) 0px, este comportamiento puede ser alterado posicionando a través de valores exactos, incluso negativos, prueba con eso que sigue
Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Imágen de fondo</title>
<style type="text/css">
<!--
#capa1 {
position:absolute;
width:267px;
height:173px;
z-index:1;
background-image: url(dibujopotadapg2.jpg);
background-repeat: no-repeat;
background-position: 50px -1500px;
border: 1px solid #003300;
}
-->
</style>
</head>
<body>
<div id="capa1"> </div>
</body>
</html>
La única forma de ver tu imágen original en su totalidad es que alguien esté usando una resolución de pantalla de 2048 x 1536, ¿Conoces a alguien?
CSS está para (entre otras cosas) para hacer eso mismo que tu quieres hacer, por supuesto que hay otras formas y variantes, podrías hacer dos páginas, y especificar atributos y propiedades internamente en cada una de ellas sin usar css, digamos index.html y 800.html, hacer cargar por defecto la index.html (que está preparada para 1024 x 768), determinar la resolución con javascript y si es 800 x 600, redirigir a 800.html. Seguramente otro en el foro nos dirá que tambien hay otro método.
En tu caso no es un sólo un caso de cambio de estilos, es un tema que requiere automatización
sin intervención del usuario. Que en muchos casos ni siuiera sabe lo que es resolución de pantalla, o si lo sabe está navegando desde un Cyber y no tiene acceso a la configuración del sistema, para eso está javascript que puede ejecutarse en el cliente
En lo que no tienes opción es que si deseas ver la imagen completa deberás crear una para cada resolución de pantalla, yo te sugiero que te limites a 1024x768 y 800x600 (al cual, insisto, por otras discusiones que he tenido, no hay que olvidar por el momento)
Para terminar estuve trabajando con tu imágen (y en relación a lo que dije en mi respuesta anterior) creo que puede ser degradada sin que pierda significado en tu página, fijate que es más bien un dibujo, bastante rústico y en escala de grises. he conseguido unos respetables 1024.jpg de 50,7KB y 800.jpg de 32,4 KB
que pueden reducirse más aún.
Y si, necesitas dos css y dos imágenes....
Saludos
