Olá Juliana,
Acredito que seu maior problema não será com o tamanho do monitor, mas sim com a resolução utilizada pelo usuário, pois o monitor apenas exibirá a imagem maior visualmente, se a imagem tiver 500 pixels de largura, continuará tendo, não sei que tipo de sistema ou site você está desenvolvendo mas uma idéia que posso lhe dar é capturar a resolução da tela quando carregar o site, e então escolher a imagem que você pretende colocar de fundo através de javascript.
Olha um exemplo:
Code Snippet
<html>
<head>
<title>Imagem</title>
<style type="text/css">
.img800 {background-image:url(img800.jpg);}
.img1024 {background-image:url(img1024.jpg);}
.img1280 {background-image:url(img1280.jpg);}
</style>
<script type="text/javascript">
function carregaImagem()
{
var largura = screen.availWidth;
var pagina = document.getElementsByTagName('body')[0];
switch (largura)
{
case 800:
pagina.className = "img800";
break;
case 1024:
pagina.className = "img1024";
break;
case 1280:
pagina.className = "img1280";
break;
}
}
</script>
</head>
<body onload="carregaImagem();">
</body>
</html>
Assim você cria um css para definir uma imagem para cada resolução, quando a página for carregada, a função javascript é chamada, ela captura a resolução da largura da tela e escolhe qual classe css carregar para o corpo da página.
Espero ter ajudado!
[]s
PS: Se o post servir, marque-o como resposta! ;-)
