Como colocar uma imagem em background que se ajuste automaticamente?

nelinho2005 · 23 de setembro de 2010

Olá Pessoal, estou fazendo um site aqui e quero no html, colocar uma função na qual a imagem de background se ajuste automaticamente em cada resolução de monitor, tipo 100% x 100%... uso esse html para index, gostaria de saber só como adicionar um comando simples ali pra ele redimensionar a foto automaticamente em 100%:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="Jogos adultos e infantis. Cartas para jogar.">
<meta name="keywords" content="mico-doido mico doido zap zapjogos baralhos cartas cartas para jogar 7 bello estoril baralhos promocionais.">
<meta name="language" content="PT-BR">
<meta name="author" content="MD">
<meta name="copyright" content="MD">
<title>...::: NELINHO AO VIVO - (47) 3467.0084 - 9107.7976 :::...</title>
<script language="javascript">AC_FL_RunContent = 0;</script>
<script src="AC_RunActiveContent.js" language="javascript"></script>
<style type="text/css">
<!--
[COLOR="Red"]body {
	background-image: url(fundo.jpg);
-->
; 			background-repeat: repeat;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;[/COLOR]</style></head>
<body bgcolor="#111111">
<!--url's used in the movie-->
<!--text used in the movie-->
<!-- saved from url=(0013)about:internet -->
<script language="javascript">
	if (AC_FL_RunContent == 0) {
		alert("This page requires AC_RunActiveContent.js. In Flash, run \"Apply Active Content Update\" in the Commands menu to copy AC_RunActiveContent.js to the HTML output folder.");
	} else {
		AC_FL_RunContent(
			'codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0',
			'width', '100%',
			'height', '100%',
			'src', 'index',
			'quality', 'high',
			'pluginspage', 'http://www.macromedia.com/go/getflashplayer',
			'align', 'middle',
			'play', 'true',
			'loop', 'true',
			'scale', 'showall',
			'wmode', 'transparent',
			'devicefont', 'false',
			'id', 'index',
			'bgcolor', '#111111',
			'name', 'index',
			'menu', 'true',
			'allowScriptAccess','sameDomain',
			'movie', 'index',
			'salign', ''
			); //end AC code
	}
</script>
<noscript>

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="100%" height="100%" align="middle">
  <param name="allowScriptAccess" value="sameDomain" />
	<param name="movie" value="index.swf" /><param name="quality" value="high" />	<embed src="index.swf" quality="high" width="100%" height="100%" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</noscript>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-6991485-2");
pageTracker._trackPageview();
} catch(err) {}</script>
</body>
</html>

Muito grato!

nelinho2005 · 1 de outubro de 2010

olá, ninguem pode me ajudar ?

netofire · 1 de outubro de 2010

O html com css não vai te dar isso, porque imagens de fundo não tem como redimensionar, somente repetir.

Pra contornar isso você vai ter de testar inserindo a imagem de fundo como uma imagem mesmo (<img>) com z-index zero, posição absoluta e aí sim, largura e altura da imagem em 100%. Depois, todo o conteúdo em uma <div> com z-index 1.

Creio que funciona, mas não tenho tempo pra criar e testar.