在大显示器显示器的图象背景重复

Question

正如您在屏幕截图中看到的那样，当在大显示器中显示时，背景图像会重复出现：

有人建议为此做任何解决方法吗？

（尽可能使用CSS代码示例）

直播网站：http://www.carleighmac.org/

Answer 1

显而易见的答案是使用：

#featured-area {
    /* other CSS unchanged */
    background-repeat: no-repeat;
}

目前，Chrome的Web Inspector工具会将背景属性规则定义为：

background: url(/themes/sunrise/img/nav/slider-background-baby.jpg) repeat-x top center;

如果您使用上述repeat-x替换“no-repeat，则这将是上述的速记版本。

Answer 2

你不希望它重复并希望以全宽显示它（如果你的图像小于显示器屏幕），你可以使用这个css。

此处有更多选项http://css-tricks.com/perfect-full-page-background-image/

#yourElementID {
  float:left;
  width:100%;
  height:300px; 
  background: url(images/bg.jpg) no-repeat top center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Answer 3

如果您使用背景速记属性，那么它将是：

background: url("/themes/sunrise/img/nav/slider-background-baby.jpg") no-repeat center top;

详情 here 。

Answer 4

如果您的图像不适合显示，那么您将不得不重复它或使其居中或适合（缩放和裁剪）它。

1. 对于居中，只用CSS很容易。使用其他答案中提到的非重复选项。但在我看来，这可能看起来有点难看。
2. 重复一遍，你已经拥有它了。
3. 现在就适合而言，你可以在这里参考一篇好文章：http://css-tricks.com/perfect-full-page-background-image/