2016-09-26 47 views
-1

ウェブページに背景画像がロードされていないという問題が発生しました 画像アドレスが次のように読み込まれていないようです。背景画像が外部ページに読み込まれない

編集: ここに私の完全なCSSコードです。

#intro { 
    position: relative; 
    padding-bottom: 102px; 
    min-height: 900px; 
    width: 100%; 
    background: #161415 
    background-image: url("http://example.com/images/38697eae8ca030cd1f8cd11d752249ef.jpg"); no-repeat center center; 
    background-size: cover !important; 
    -webkit-background-size: cover !important; 
} 

これは私のindex.htmlの外観です。

<!DOCTYPE html> 
<!--[if lt IE 8 ]><html class="no-js ie ie7" lang="en"> <![endif]--> 
<!--[if IE 8 ]><html class="no-js ie ie8" lang="en"> <![endif]--> 
<!--[if (gte IE 8)|!(IE)]><!--><html class="no-js" lang="en"> <!--<![endif]--> 
<head> 

    <!--- Basic Page Needs 
    ================================================== --> 
    <meta charset="utf-8"> 
    <title>Coming soon</title> 
    <meta name="description" content=""> 
    <meta name="author" content=""> 

    <!-- Mobile Specific Metas 
    ================================================== --> 
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 

    <!-- CSS 
    ================================================== --> 
    <link rel="stylesheet" href="http://example.com/new/css/default.css"> 
    <link rel="stylesheet" href="http://example.com/new/css/layout.css"> 
    <link rel="stylesheet" href="http://example.com/new/css/media-queries.css">  

    <!-- Script 
    ================================================== --> 
    <script src="http://example.com/new/js/modernizr.js"></script> 

    <!-- Favicons 
    ================================================== --> 
    <link rel="shortcut icon" href="example.com/new/favicon.png" > 

</head> 

<body> 

    <div id="preloader">  
     <div id="status"> 
     <img src="http://example.com/new/images/preloader.gif" height="64" width="64" alt=""> 
     </div> 
    </div> 

    <!-- Intro Section 
    ================================================== --> 
    <section id="intro"> 

    <header class="row">  

      <div id="logo" > 
       <a href="#" > 
       <img src="http://185.27.134.27/login_logo/ce7c43a1c5602d942c279e478e4c7823.jpg" alt="Zoon">     
       </a>     
      </div> 

      <nav id="nav-wrap"> 

       <a class="menu-btn" href="#nav-wrap" title="Show navigation">Show navigation</a> 
       <a class="menu-btn" href="#" title="Hide navigation">Hide navigation</a> 

       <ul id="nav" class="nav"> 
       <li class="current"><a href="http://example.com" target="_blank">Home</a></li> 
       <li><a href="http://example.com/whyus.php" target="_blank">About</a></li>     
       </ul> <!-- end #nav --> 

      </nav> <!-- end #nav-wrap -->    

    </header> <!-- Header End -->  

    <div id="main" class="row"> 

     <div class="twelve columns"> 

<p>Attention if you are the website owner you are seeing this page because you have not yet uploaded or installed a website if you are having problems please contact support through your cpanel or you may login below to edit your website.</p> 

      <!-- Begin MailChimp Signup Form --> 
      <div id="mc_embed_signup"> 
      </div> 
<form action="http://cpanel.example.com/login.php" method="post" name="login" > 
<label for="mod_login_username">Cpanel Username:<input name="uname" id="mod_login_username" type="text" class="inputbox" alt="username" size="10" /></label> 
<label for="mod_login_password">Password:<input type="password" id="mod_login_password" name="passwd" class="inputbox" size="10" alt="password" /></label> 
<input type="submit" name="Submit" class="button" value="Login" /> 
<a href="http://cpanel.example.com/lostpassword.php">Lost your password?</a> 

     </div> 

     </div> <!-- main end -->  

    </section> <!-- end intro section --> 


    <!-- About Section 
    ================================================== --> 
    <section id="about"> 

     <div class="row section-header"> 

     <div class="twelve columns">  

      <div class="icon-wrap"> 
       <i class="fa fa-group"></i> 
      </div> 


     </div> 

     </div> <!-- end section-header -->     

     <div class="row section-content"> 

      <div class="six columns"> 

      </div> 

      <div class="six columns"> 

      </div>    

     </div> <!-- end section-content --> 

     <div class="row section-content"> 

      <div class="six columns"> 

      </div> 

      <div class="six columns"> 

      </div>    

     </div> <!-- end section-content -->  

     <div id="call-to-action">   

      <div class="row section-ads"> 

       <div class="twelve columns">      


        <div class="action"> 
       </div> 

       </div> 

      </div> <!-- end section-ads -->       

     </div> <!-- end call-to-action -->   

    </section> <!-- About Section End-->  


    <!-- Location Section 
    ================================================== --> 
    <section id="location"> 

     <div class="contacts">  

      <div class="row contact-details">         

       <div class="columns"> 


       </div> 

       <div class="columns"> 


       </div>  

       <div class="columns end"> 


       </div>   

      </div> <!-- end contact-details -->  

     </div> <!-- end contacts --> 


    </section> <!-- end location section --> 

    <!-- footer 
    ================================================== --> 
    <footer> 

     <div class="row"> 

     <div class="twelve columns">    

      <ul class="copyright"> 
       <li>&copy; Copyright 2016 Coming soon</li> 

      </ul> 

     </div>   

     </div> 

     <div id="go-top"><a class="smoothscroll" title="Back to Top" href="#intro"><i class="icon-up-open"></i></a></div> 

    </footer> <!-- Footer End--> 

    <!-- Java Script 
    ================================================== --> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
    <script>window.jQuery || document.write('<script src="http://empire-webhosting.com/new/js/jquery-1.10.2.min.js"></script>')</script> 
    <script type="text/javascript" src="http://example.com/new/js/jquery-migrate-1.2.1.min.js"></script> 

    <script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"></script> 
    <script src="http://example.com/new/js/gmaps.js"></script> 
    <script src="http://example.com/new/js/waypoints.js"></script> 
    <script src="http://example.com/new/js/jquery.countdown.js"></script> 
    <script src="http://example.com/new/js/jquery.placeholder.js"></script> 
    <script src="http://example.com/new/js/backstretch.js"></script> 
    <script src="http://example.com/new/js/init.js"></script> 

</body> 

</html> 
+0

あなたはCMSを使用していますか? – Adjit

+1

私はあなたのimgのパスとtahtの背景のCSSとの関係はどこにありますか?どのように関連していますか?かなり不明瞭だと思われる – DaniP

+2

ちょうど、あなたが背景イメージを定義するとき、no-repeatを含めることはできません。バックグラウンド:url()no-repeatを使用するかbackground-repeat:no-repeatを追加する –

答えて

0
は、あなたのCSSが無効であるため、(あなたが background-imageを定義するときに no-repeatを含めることはできませんいずれか background: url() no-repeat;を使用するか background-repeat: no-repeat;を追加します。)、これにあなたのCSSを変更し

#intro { 
    position: relative; 
    padding-bottom: 102px; 
    min-height: 900px; 
    width: 100%; 
    background: #161415 url(http://example.com/images/38697eae8ca030cd1f8cd11d752249ef.jpg) no-repeat center center; 
    background-size: cover; 

}

また、url構文に引用符を含める必要はありません。私はそれを残すことを好む。このポストのこれに関するより多くの情報:Is quoting the value of url() really necessary?

関連する問題