如何设置大背景图片

【问题标题】：How to set large Background Image如何设置大背景图片
【发布时间】：2017-10-30 23:03:21
【问题描述】：

我有一个 PSD 格式的设计，我正在将其转换为 HTML/CSS。我想在背景中设置一个大图像，也出现在标题后面。谁能告诉我该怎么做？

【问题讨论】：

HTML body background.
HTML5 不支持背景属性。改用 CSS。使用 CSS 语法：

标签： html css

【解决方案1】：

这是一个例子：

body {
  background: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQxC6tuHBQvtvENnQRI-7iRaEfqigj-cuacu1IeYYXBmYD1J9VrJQ");
  
  background-size: cover;
  background-repeat: no-repeat;
}

h1{
color: #fff;
font-size: 30px;
text-align: center;
}

<body>

  <div class="header">

    <h1>Header</h1>

  </div>

</body>

【讨论】：

【解决方案2】：

如果仅在<header>中，则需要添加如下CSS代码。

header {
  background-image: url('path-to-image');
  background-position: relative; /* This depends on your preferences */
  background-size: cover;
}

如果您在<header> 中添加<img>，您也可以这样做

header img {
  position: relative;
  width: 100%;
  height: auto; /* or height: 100vh */
}

【讨论】：