背景图片不会出现在IE&铬

时间:2014-09-19 17:28:45

标签: html css background-image

所有内容似乎都在Firefox中呈现,但在Chrome和IE中,我的背景图片根本无法呈现。

有人可以查看我的代码并提供一些过去有效的解决方案吗?

       <!DOCTYPE html>
<html>
<head>
<title>Treadstohne Group | Aviation Consulting Services | Stan Gadek</title>
<style type="text/css">
body {
     color: #444444;
     font-family: helvetica, arial,sans-serif;
     font-style: none
     height:100%;
     min-height:100%;
     background-image: url("http://p3plcpnl0658.prod.phx3.secureserver.net:2083/cpsess9841192309/viewer/home%2fsgadek%2fpublic_html%2fimages/background.jpg")no-repeat cover;
     min-height:100%;
}
html {
     height:100%;
     min-height:100%;
}
#bg {
    position: fixed; 
    top: 0; 
    left: 0; 
    /* Preserve aspet ratio */
    min-width: 100%;
    min-height: 100%;
}
h2  {
    font-size: 15px
}
#bodycontent{
     position:absolute;
     top:25%;
     left:35%;
     margin:-100px 0 0 -150px;
}
#padding {
    width: 800px;
    padding: 25px;
    margin: 25px;
     /* default fallback */
    background: rgb(255, 255, 255) transparent;
    /* nice browsers */
    background: rgba(255, 255, 255, 0.7);
    border-radius: 6px;
}
hr {
    border: 0; 
    height: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1); 
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    width: 800px
}
/* unvisited link */
a:link {
    color: #21759b;
    text-decoration: none
}
/* visited link */
a:visited {
    color: #21759b;
}
/* mouse over link */
a:hover {
    color: #000000;
}
</style>
<!--begin of analytics script-->
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-48171310-1', 'auto');
  ga('send', 'pageview');
</script>
<!--end of analytics script-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="Treadstohne Group - Aviation Consulting Services">
    <meta name="keywords" content="aviation consulting services, treadstohne group, aviation, treadstohne, treadstone, stan gadek, airline consulting, airline industry, U.S. airline consulting, airline consultant ">
</head>
<div id="bg">
<body>
</div>
<div id="bodycontent">
<div id="padding">
<h1>Treadstohne Group</h1>
<h2>&nbsp;Aviation Consulting Services</h2>
<hr>
<h3>Treadstohne Group is not your typical aviation consulting firm.</h3>
      <p>With CEO and CFO expertise in strategic planning, operations, finance and restructuring in the aviation and aerospace sectors, TreadStohne Group offers business consulting and advisory services to senior management and directors. Our experience includes planning, financial modeling, aerospace manufacturing, supply chain management, M&amp;A, LEAN process in service environments, and labor/management relations. </p>
      <p>Recent engagements and associations include:</p>
            <ul>
                  <li>A commercial helicopter company providing services in the forestry, oil and gas, construction, and military sectors.</li>
                  <li>A large military charter and cargo operator.</li>
                  <li>Commuter airline undergoing a financial restructuring.</li>
                  <li>An aerospace manufacturer of private jet aircraft.</li>
                  <li>A regional avionics firm engaged in sales, installation and service.</li>
                  <li>Advisor to public equity for the evaluation of aviation and aerospace investments.</li>
            </ul>
            <hr>
      <p>Please contact Stan Gadek, Principal for more information at:</p>
      <p><a href="mailto:Stan.gadek@treadstohne.com">Stan.gadek@treadstohne.com</a><p>
</div>
</div>
</body>
</html>

谢谢

2 个答案:

答案 0 :(得分:2)

您的标记不正确。你有这个:

<div id="bg">
<body background="http://p3plcpnl0658.prod.phx3.secureserver.net:2083/cpsess9841192309/viewer/home%2fsgadek%2fpublic_html%2fimages/background.jpg">
</div>

什么时候应该是这样的:

<body style="background:url('http://p3plcpnl0658.prod.phx3.secureserver.net:2083/cpsess9841192309/viewer/home%2fsgadek%2fpublic_html%2fimages/background.jpg')">

您可能还需要设置背景大小,重复等等,但目前,这是您的问题。此外,我会这样替换它:

HTML标记

<body>
your content

然后在CSS中

body{background:url('http://p3plcpnl0658.prod.phx3.secureserver.net:2083/cpsess9841192309/viewer/home%2fsgadek%2fpublic_html%2fimages/background.jpg') no-repeat cover}

答案 1 :(得分:0)

为什么不:

body {
 color: #444444;
 font-family: helvetica, arial,sans-serif;
 font-style: none
 height:100%;
 min-height:100%;
 background-image: url("http://p3plcpnl0658.prod.phx3.secureserver.net:2083/cpsess9841192309/viewer/home%2fsgadek%2fpublic_html%2fimages/background.jpg");
  background-repeat: no-repeat;
}

这不会确定您的问题,但如果您使用CSS,为什么不使用CSS?