Question

我是css的新手，我不知道如何只为我的标题添加背景图片。我已经有了整个页面的背景图片，但知道我只需要为我的标题设置一个。为什么不能使这段代码工作，我该如何解决呢。

HTML代码：

<!DOCTYPE html>
<html lang="nl">
<head>
   <title>De fonduepot | Home</title>
   <meta charset="utf-8" />
   <link rel="stylesheet" href="css/start.css" />
   <link rel="stylesheet" href="css/styles.css" />
   <link rel="stylesheet" href="css/home.css" />
   <link href='http://fonts.googleapis.com/css?family=Bitter' rel='stylesheet' type='text/css'>
</head>
<body>
   <header>
      <div class="wrapper">
         <img class="left" src="images/thefonduepot.png" alt="foto van een fonduepot" />
         <h1>De fonduepot</h1>
         <img class="right" src="images/thefonduepot.png" alt="foto van een fonduepot" />
      </div>
   </header>
</body>
</html>

CSS代码：

body {
background-image: url("../images/houtachtergrond.jpg");
}

.wrapper {
width: 70%;
margin: 0 auto;
}

header .wrapper {
background-image: url("../images/zand.jpg");
}

h1 {
float: left;
font-family: 'Bitter', serif;
font-size: 4rem;
line-height: 3.5rem;
width: 20rem;
text-align: center;
margin-left: 9rem;
color: #8A0810;
margin-top: 1.25rem;
}

header .left {
float: left;
width: 10rem;
}

header .right {
float: right;
width: 10rem;
}

Answer 1

您需要设置背景图像的宽度和高度。

http://jsfiddle.net/sS3u8/

header .wrapper {
    background-image: url("../images/zand.jpg");
    width: 100%;
    height: 300px;
    background-size: contain;
}

Answer 2

而不是这个

header .wrapper {
background-image: url("../images/zand.jpg");
}

你可以尝试类似的东西

header {
background-image: url("../images/zand.jpg");
}

虽然有点奇怪，但我的意思是header .wrapper的定义。我写的第二个例子应该为标题标签设置提供的背景图像，当然它可以让你进一步了解如何做其他事情。

设置第二个背景图像？

2 个答案: