-1
display：gridコンテナ（セクション要素）に入っているグリッドセル（div要素）に背景イメージを追加しようとしています。私は背景画像を試しています：url（ "background.png"）しかし、それは動作していません。どうしてか分かりません。私は複数回試してみましたが、使用していません。ここでは、ここで事前に おかげ背景画像をグリッドセルに追加する方法は？
をいくつかの助けを必要とすることは、HTMLやCSSコード：
<!doctype HTML>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/styles.css">
<link rel="icon" type="image/png" href="images/fav.ico" sizes="32x32" />
</head>
<body>
<section id="the-grid">
<div id="header">
Welcome
</div>
<div id="nav">
Navigation
</div>
<div id="main">
Main Content
</div>
<div id="footer">
Footer
</div>
</section>
</body>
</html>
CSS：
/*Root Elements and Border Box Fix*/
html {
height: 100;
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
body{
font-family: "segoe ui", helvetica;
margin: 0;
}
#the-grid{
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(6, 1fr);
grid-template-areas:
"header header header header header"
"nav main main main main"
"nav main main main main"
"nav main main main main"
"nav main main main main"
"footer footer footer footer footer";
}
/* Grid Cells */
#header{
background-image: url("nav.png");
grid-area: header;
text-align: center;
}
#nav{
grid-area: nav;
}
#main{
grid-area: main;
}
#footer{
grid-area: footer;
text-align: center;
}
あなたが試したコードを追加してください。問題を再現することができれば役立ちます。 –
私はちょうど私のクリスタルボールを壊しました:)あなたの問題を示しているコードはありません=助けがありません:( –
'background-image'が動作しています... [this]（https://jsfiddle.net/ykx64dsL/）をご覧ください – kukkuz