【问题标题】:CSS Background Image limits to content instead of entire pageCSS 背景图像限制为内容而不是整个页面
【发布时间】:2013-10-25 03:18:31
【问题描述】:

所以,我为我的网站的背景制作了一个渐变图片,因为它没有太多细节,我想我会拍摄这张图片并使用带有 CSS 的 background-image 和其他东西在页面上拉伸它。但是,图像拒绝以正确的方式垂直拉伸。我可以让它水平拉伸就好了,但无论我做什么,它都不会在页面上垂直拉伸到 100%,而是将自身限制为页面上的内容,这是我不想要的。我可以让图片水平拉伸而不影响像素长度的唯一方法是使用封面,但它会变得太高。谁能给我一段代码,我可以用它来扩展图像以水平和垂直适应页面吗?因为它拒绝,我不知道为什么

这是我头部样式标签中的 CSS 代码

body {  
    background: url('Background.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

【问题讨论】:

  • 如果没有看到您的代码,我们很难理解。发布您的代码伙伴。

标签: html css image background-image


【解决方案1】:

对于初学者,背景重复设置为无重复。

你需要让 body 填满浏览器,无论它包含多少内容,否则它只会重复到内容。

编辑:

无论内容是什么,都让页面填满浏览器。

html, body { height: 100%;}

【讨论】:

  • 我不希望它重复,它是一个单一的图像我想填满整个窗口
  • 它仍然拒绝工作编辑:哦,我没有意识到'html'部分是必要的。它现在可以工作了,谢谢伙计
  • 仍然拒绝让我投票,显然还没有 15 名声望,对不起
猜你喜欢
  • 2016-07-04
  • 2013-12-23
  • 1970-01-01
  • 2015-11-22
  • 2014-10-17
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多