Question

我正在尝试让我的背景图像覆盖CSS中的整个标题，但是当我使用CSS的“background-size：cover”功能时，只显示我图像的顶部。如何让我的整个图像显示在标题的背景中？提前谢谢！

CSS：

header {
  background: url("file:///Users/FilePath/image.jpg");
  background-size: cover;
  color: white;
  padding: 10px;
  text-align: center;
  border-bottom-style: ridge;
  border-bottom-width: 5px;
}

HTML：

<html>
  <title>My Page</title>
  <body>
    <header>
      <h1>Hello World</h1>
   </header>
   <section>
     <p> My First Section </p>
   </section>
  </body>
</html>

Answer 1

试试这个：

html, body{margin:0; height:100%;}

header {
      height:100vh;
      background:url("file:///Users/FilePath/image.jpg") 50% / cover
    }

Answer 2

尝试做背景大小：100％;

Answer 3

根据我的评论：

  background: #ccc url("http://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png") no-repeat;
  background-size: contain;
  background-position: 50% 0;

http://jsfiddle.net/ad8ht837/1/

Answer 4

你尝试过背景大小：100％100％; ？

http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=contain

需要背景图像按比例覆盖整个标题

4 个答案: