2014-09-19 71 views
-1

在Firefox中,一切似乎都按預期呈現,但在Chrome和IE中,我的背景圖片根本不會呈現。背景圖片不會出現在IE和Chrome中

有人可以檢查我的代碼,也許提供一些過去有效的解決方案嗎?

 <!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:[email protected]">[email protected]</a><p> 
</div> 
</div> 
</body> 
</html> 

感謝

+3

要檢查您的代碼,我們需要查看您的代碼。 – ncksllvn 2014-09-19 17:30:50

+0

好的 - 它的! – Kevin 2014-09-19 17:36:15

+0

試試html5 doctype – 2014-09-19 17:40:50

回答

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

他還在結束標籤外部使用元標記。 – Joseph 2014-09-19 18:09:18

+0

好用的元標記 - 馬丁,我做了你所建議的改變,現在它不想在Firefox中渲染......太令人沮喪了! – Kevin 2014-09-19 18:26:57

+0

我給你的是非常基本的,所以它應該工作,你可能有更多的問題,因爲你真的在你的HTML中有一個混亂,爲什麼你不用編輯你的問題,因爲你現在擁有它,所以我們可以看到問題是什麼? – 2014-09-19 18:40:17

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; 
} 

倒不是說將確定您的問題,b如果你使用CSS爲什麼不使用CSS?