时间戳

首页 > 解决方案 > 如何在页面上居中背景图像？

html - 如何在页面上居中背景图像？

问题描述

我无法将图像作为导航栏下的全屏背景居中。这是我目前正在使用的代码。

header{
  background-image: url("design.jpg");
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  height: 100%
}

标签： htmlcss

解决方案

与您的代码类似的简单方法是

html { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

还有一些其他技巧，您将从这里获得

https://css-tricks.com/perfect-full-page-background-image/

希望能帮助到你。

-NBua

推荐阅读