CSSの背景画像が表示されない

なぜ私のCSS背景画像が突然表示されないのかを理解するために助けが必要です。私はYahooと一緒にホスティングしていましたが、そのサーバーは本当に遅いので、gatorをホストするように切り替えました。それらにすべてを転送した後、私は画像が表示されていないことに気付きました...ファイルの拡張子が大文字でアップロードされていることが判明しました。それを変更し、すべて正常に働いた。しかし、今は絵が消えてしまい、戻すことができません。私は今と今の間に何も変えていない。私は何かを欠いている？助けてください！コメントを読みたくないあなたのそれらのためにCSSの背景画像が表示されない

/* Header */ 
 

 
#header { 
 
    background: #333333 url("../images/pic01.jpg") !important; no-repeat; 
 
    background-size: cover; 
 
    color: #fff; 
 
    padding: 6em 0; 
 
    text-align: center; 
 
    background-position: 0% 65%; 
 
    position: relative; 
 
} 
 

 
#header:before { 
 
    content: ''; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    background: rgba(16, 32, 48, 0.25); 
 
} 
 

 
#header > * { 
 
    position: relative; 
 
    z-index: 1; 
 
} 
 

 
.homepage #header { 
 
    padding: 8em 0; 
 
    background-position: center; 
 
}

<html> 
 
<head> 
 
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> 
 
<title>AIC Consulting &amp; Design</title> 
 
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
 
<meta name="description" content="" /> 
 
<meta name="keywords" content="" /> 
 
<!--[if lte IE 8]><script src="css/ie/html5shiv.js"></script><![endif]--> 
 
<script src="js/jquery.min.js"></script> 
 
<script src="js/jquery.dropotron.min.js"></script> 
 
<script src="js/skel.min.js"></script> 
 
<script src="js/skel-layers.min.js"></script> 
 
<script src="js/init.js"></script> 
 
<noscript> 
 
<link rel="stylesheet" href="css/skel.css" /> 
 
<link rel="stylesheet" href="css/style.css" /> 
 
</noscript> 
 
<!--[if lte IE 8]><link rel="stylesheet" href="css/ie/v8.css" /><![endif]--> 
 
</head> 
 
<body class="homepage"> 
 

 

 

 
<!-- Header --> 
 
<div style="padding-top:10px; padding-left:10px"> 
 
    <h1> 
 
    <img alt="AIC Consulting and Design Logo" longdesc="Blue circle with AIC consulting and Design in front of a feather" "relative" src="images/Logo-transparent.gif" height="71" >&nbsp; Creations made to your design. 
 
    </h1> 
 
</div> 
 
<div id="header"> 
 
    <div class="container"> 
 
    <!-- Logo --> 
 

 
    <!-- Nav --> 
 
    <nav id="nav"> 
 
     <ul> 
 
     <li><a href="index.html">Home</a></li> 
 
     <li><a href="">Services</a> 
 
     <ul> 
 
      <li><a href="websites.html">Website Design</a></li> 
 
      <li><a href="id.html">Instructional Design</a><ul> 
 
      <li><a href="technology.html">Technology Integration</a></li> 
 
      <li><a href="usability.html">Usability testing</a></li> 
 
      <li><a href="needs.html">Needs Assessment</a></li> 
 
      <li><a href="training.html">Training Services</a></li> 
 
     </ul> 
 
     </li> 
 
     <li><a href="video.html">Video Production</a></li> 
 
     <li><a href="publishing.html">Academic Services</a> 
 
     <ul> 
 
      <li><a href="organizers.html">For Organizers</a></li> 
 
      <li><a href="authors.html">For Authors</a></li> 
 
     </ul>  
 
     </li> 
 
     <li><a href="portfolio.html">Portfolio</a></li> 
 
     <li><a href="about.html">About Us</a></li> 
 
     <li><a href="mailto:[email protected]; [email protected]">Email AIC Consulting 
 
&amp; Design, LLC</a></li> 
 
    </ul> 
 
    </nav>

出典

2017-08-23 Inky1231

が存在する場合

は「http://www.site.ext/images/pic01.jpg」をブラウザで表示することが最初に試すの絶対パスの場所を使用することができます好き？あなたは相対パス '../ images/pic01.jpg'でファイルを参照しているので、' pic01.jpg'はそれを含むCSSファイルから一レベル上の 'images'フォルダにある必要があります（したがって、あなたの 'css'フォルダと同じレベルにある必要があります）。 –

エラーが表示されているブラウザのコンソールを確認できますか？ Google Chromeで、F12キーを押してブラウザコンソールを開くことができます。 –

@ObsidianAge正しいディレクトリを指しています。この画像は先週ちょうど正常に機能しました – Inky1231

。私は絵を見ることができず、他の人は私を助けてくれました。シンプルな解決策は、キャッシュをクリアすることでした。

出典

2017-08-23 05:21:43 Inky1231

あなたはそれがあなたのディレクトリ構造を見て何その後、

background-color:#f1f1f1; 
    background-image: url('http://www.site.ext/images/pic01.jpg');

または

background: url('http://www.site.ext/images/pic01.jpg') #f1f1f1;

出典

2017-08-23 05:50:57 bdalina

Bdalinaに感謝しましたが、私たちはそれを理解しました。 – Inky1231

CSSの背景画像が表示されない

答えて

関連する問題