Question

这可能是本网站上最基本的问题之一，因此我期待一些快速的答案。当我尝试为我的网站设置背景图像时，我在绘画中编辑图像，并且我不得不编辑像素的图像像素，以使图像覆盖网站的每个区域。是否有任何标准或HTML编码可以自动将图像大小调整为网站的确切大小？

Answer 1

你需要做这样的事情：

/*************************************************************************************
by forcing `height: 100%` in the html and body tag will make sure there are no white areas in vicinity (this is optional though, use it only if you need it)
*************************************************************************************/
html,
body{
    height: 100%;
}

/*************************************************************************************
by using `background-size: cover;`, you will make sure the image will cover everything
*************************************************************************************/
body{
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    background-image: url("your_image.jpg");
}

另外，请考虑使用-moz-和-webit-前缀，以确保它适用于旧版浏览器版本的webkit和基于gecko的浏览器。

Answer 2

在CSS样式表中，您可以使用以下代码（其中images / bg.jpg是背景图片的路径）

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;
}

适用于： Safari 3 +，Chrome，IE 9 +，Opera 10 +，Firefox 3.6 +

Answer 3

你熟悉css吗？将背景添加为图像：

<img src="yoursource.png" class="yourclass" />

并使用此css代码段：

.yourclass {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -100; /* puts image into the background */
}

Answer 4

我假设您在body上设置了背景图片，但如果不是，那么您应该这样做。使用background-size: cover;将拉伸图像以适合

CSS自动调整背景图片？

4 个答案: