CSSの背景画像がh2要素によって置換されています

CSSのbackground-image属性を使用して背景画像を設定しました。ほとんどのページを通して、完全に動作します。ただし、ある特定の<h2>要素に達すると、<h2>に定義されている領域全体に背景画像は表示されません。CSSの背景画像がh2要素によって置換されています

どうすればこの問題を解決できますか？

html { 
 
    background-image: url("https://wallpaperscraft.com/image/city_hong_kong_night_clouds_lights_58330_3840x2160.jpg"); 
 
}

<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>Dimstone</title> 
 
    <meta name="description" content="Building the website"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> 
 
    </script> 
 
    <link rel="stylesheet" href="main.css"> 
 
</head> 
 

 
<body id="b-override"> 
 

 
    <h2 id="header">header</h2> 
 

 
    <div id="top-navbar"> 
 
    <ul class="nav navbar-nav navbar-left"> 
 
     <li><a class="nav-link" href="#">HomePage</a></li> 
 
     <li><a class="nav-link" href="#">SignUp</a></li> 
 
     <li><a class="nav-link" href="#">About</a></li> 
 
    </ul> 
 
    </div> 
 

 
</body> 
 

 
</html>

出典

2017-11-22 Dman

あなたのh2にはおそらく背景色があります。その要素のスタイルを確認します。 – arbuthnott

h2からマージンを取り除き、必要に応じてパディングに置き換えます。 –

'h2＃header { margin-top：0px; } ' –

それはh2ではありませんが、（ID #b-overrideを持っている）bodyタグが

このCSSを追加します。

body#b-override { 
    background: transparent; 
}

html { 
 
    background-image: url("https://wallpaperscraft.com/image/city_hong_kong_night_clouds_lights_58330_3840x2160.jpg"); 
 
} 
 

 
body#b-override { 
 
    background: transparent; 
 
}

<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>Dimstone</title> 
 
    <meta name="description" content="Building the website"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> 
 
    </script> 
 
    <link rel="stylesheet" href="main.css"> 
 
</head> 
 

 
<body id="b-override"> 
 

 
    <h2 id="header">header</h2> 
 

 
    <div id="top-navbar"> 
 
    <ul class="nav navbar-nav navbar-left"> 
 
     <li><a class="nav-link" href="#">HomePage</a></li> 
 
     <li><a class="nav-link" href="#">SignUp</a></li> 
 
     <li><a class="nav-link" href="#">About</a></li> 
 
    </ul> 
 
    </div> 
 

 
</body> 
 

 
</html>

出典

2017-11-22 20:41:19 Johannes

注意：w3.orgは、「著者はHTML要素ではなくBODY要素の背景を指定する」ことを推奨しています。 - [background @ w3.org]（https://www.w3.org/TR/CSS2/colors.html#background） – showdev

CSSの背景画像がh2要素によって置換されています

答えて

関連する問題