在Firefox上更改选项卡后，身体的背景图像消失了答案

【问题标题】：backgroung image of the body disappears after changing tab on firefox在Firefox上更改选项卡后，身体的背景图像消失了
【发布时间】：2013-02-25 22:59:00
【问题描述】：

我有一个背景图像为 1,32mb 的网站，它位于正文的 css 中，问题是当我在 Firefox 中更改选项卡并再次返回我的网站时，背景消失，并显示为白色背景.. . 有人知道发生了什么吗？

//html

<!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>
<title>Cacilda Tour</title>
<link rel="StyleSheet" type="text/css" href="css/style.css" />
<script language="JavaScript" type="text/JavaScript">

<!-- começo do codigo random imagens
var mypics=['toppo1.png','toppo2.png','toppo3.png'];
onload=function(){
    var oTd = document.getElementById('cel');
    var pic= 'topo/'+mypics[Math.floor(Math.random()*mypics.length)];
    oTd.style.backgroundImage='url('+pic+')';
}
//  fim do codigo de imagens -->
</script>
</head>
<body>
<div class="principal">
    <div class="cabecalho">

    <img id="cel" src="images/topo_transp.gif" border="0" >

    </div>
    <div class="menu">

    </div>
    <div class="conteudo">
        <div class="centroesq">
            <div class="titcentroesq">
            <p>Pacotes</p>
            </div>
        </div>
        <div class="centrodir">
            <div class="titcentrodir">
            <p>Corporativo</p>
            </div>
        </div>
    </div>
    <div class="rodape">

    </div>


  </div>
</body>

</html>

//css

body{
background-image: url(../imagens/fundo.jpg);
background-repeat:no-repeat;
height:1065px;
}
.principal{
width:980px;
margin: 0 auto;
}
.cabecalho{
float:left;
width:100%;
}
.cabecalho img {
width:100%;
background-repeat:no-repeat;
width:980px; 
height:200px;
}
.menu{
float:left;
width:100%;
height:40px;
background-image: url(../imagens/fundomenu.png);
margin-top:8px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
.conteudo{
float:left;
width:100%;
height:700px;
background-image: url(../imagens/fundomenu.png);
margin-top:8px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
.centroesq{
float:left;
width:488px;
height:300px;
border-right:1px dotted #c0c0c0;
margin-top:8px;
}
.titcentroesq{
float:left;
width:460px;
height:32px;

margin-left:10px;
background-image: url(../imagens/fundotitulo.png);
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
line-height:2px;
color:#10468c;
font-family:arial;
font-size:105%;
font-weight:bold;
text-align:left;
padding-left:10px;
border:1px solid #fbca18;
}
.centrodir{
float:left;
width:490px;
height:300px;
margin-top:8px;
}
.titcentrodir{
float:left;
width:460px;
height:32px;

margin-left:10px;
background-image: url(../imagens/fundotitulo2.png);
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
line-height:2px;
color:#ffffff;
font-family:arial;
font-size:105%;
font-weight:bold;
text-align:left;
padding-left:10px;
border:1px solid #2b4688;
}
.rodape{
float:left;
width:100%;
height:95px;
background-image: url(../imagens/fundomenu.png);
margin-top:8px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;

}

【问题讨论】：

为什么在使用width: 100%时要向左浮动？
如果你能提供你正在处理的网址，那就太好了
datacode.com.br/clientes/cacildatour
离开标签1分钟，你可以看到它消失了......
其他评论也一样，图片的大小太大了 1.3 Mb 只是为了背景，我认为这不是一个好主意。如果您使用的是 Photoshop，请尝试通过以下选项保存图像：为 Web 和设备保存以减小其大小。我在 Firefox 上没有发现任何问题，只是图像加载速度太慢。

标签： html css firefox

【解决方案1】：

我感觉问题是图像太大了。尝试为网络压缩它。

【讨论】：