如何 - 整页图片

了解如何使用 CSS 创建整页背景图片。

整页图片

了解如何创建覆盖整个浏览器窗口的背景图片。以下示例显示了全屏（和半屏）响应式背景图片：

演示 - 整页背景图片

演示 - 半页背景图片

如何创建全高图片

使用容器元素并向容器添加背景图片height: 100%。提示：使用 50% 创建半页背景图片。然后使用以下背景属性完美居中和缩放图片：

笔记：为了确保图片覆盖整个屏幕，您还必须应用height: 100%对于 <html> 和 <body>：

示例

body, html {
  height: 100%;
}

.bg {
/* The image used */
background-image: url("img_girl.jpg");

/* Full height */
height: 100%;

/* Center and scale the image nicely */
background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

亲自试一试 »

半页背景图片：

示例

.bg {
height: 50%;
}

亲自试一试 »