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

私のセクションの1つにbackground-imageというプロパティがあります。ここではHTMLコードは次のとおりです。CSS背景画像に画像が表示されない

<!DOCTYPE html> 
<html lang="pl"> 
<head> 
<meta charset="UTF-8"/> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css"> 
    <link rel="stylesheet" href="css/bootstrap-theme.min.css" type="text/css"> 
    <link rel="stylesheet" href="css/custom.css" type="text/css"> 
    <title>Elipsis</title> 
    <meta name="description" content=""> 
    <meta name="keywords" content=""> 
    <meta name="author" content=""> 
</head> 
<body> 
<header id="intro"> 
    <div class="container-fluid"> 
     <div class="row"> 
      <div class="col-xs-12"> 

      </div> 
     </div> 
    </div> 
</header> 
<main> 
<section id="about"> 
    <div class="container-fluid"> 
     <div class="row"> 
      <div class="col-xs-12"> 
      </div> 
     </div> 
    </div> 
</section> 
<section id="services"> 
    <div class="container-fluid"> 
     <div class="row"> 
      <div class="col-xs-12"> 
      </div> 
     </div> 
    </div> 
</section> 

</main> 
<footer id="contact"> 
    <div class="container-fluid"> 
     <div class="row"> 
      <div class="col-xs-12"> 
      </div> 
     </div> 
    </div> 
</footer> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<script src="js/bootstrap.min.js"></script> 
</body> 
</html>

とCSS：

#intro { 
    background-image: url(.../.../img/intro.png); 
    background-image: url(intro.png);  
    background-image: url(".../.../img/intro.png"); 
    background-image: url("intro.png"); 
}

Index.htmlとは、CSSファイルは、root/CSS /であり、ルートフォルダにある...とintro.pngがroot/IMGの両方であります/ ...とルートフォルダ。なぜそれは表示されないのですか？私はここでいくつかの記事をGoogleからスタックといくつかの記事を読んだが、何も動作するようです。

出典

2017-01-06 grhu

二重ドット（../）を試してください。相対パスを使用している場合は、パスがCSSファイルの相対パスであることを確認してください。 – Pete

'url（" ../ img/intro.png "）;' –

イメージの要素に内容や高さが定義されていますか？ – j08691

background-image: url("intro.png");

であるあなたがCSSルールは非常に最後の行が適用されることを書いた方法で、

だから、あなたはおそらく

にそれを変更したい（それ以前に他の行が上書きされます）

#intro { 
    background-image: url("../img/intro.png"); 
    height: 300px; /*whatever value, if there is no content */ 
}

さらに、誰かがコメントに書いたとおり、その要素には内容がなく、高さが定義されていないと、高さが0になるため、背景イメージは表示されません。

出典

2017-01-06 14:39:06 Johannes

#intro { 背景画像：url（ ".../intro.png"）; 身長：1000px; } および #intro { background-image：url（ "intro.png"）; 身長：1000px; } ルートカタログのintro.pngでも機能しません。 – grhu

別の編集：完全なCSSルールを含む – Johannes

最後に、 'background-image：url（ "../intro.png"）; '働いて、ありがとう。しかし、私はなぜ多くのサイトやトピックに3ドットがあるのか理解していません。 – grhu

これを試してください。 background-image：url（ '../ img/intro.png'）;

私は通常、適切なパスを取得するためにそのイメージをドラッグアンドドロップします。私はこれが役立つことを願っています

出典

2017-01-06 14:41:11 jmag

これらのプロパティも追加してください。 background-size：cover; – jmag

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

答えて

関連する問題