Question

我是HTML和CSS的新手。刚学到一些基本的东西。希望有人能就这个头痛问题给我一些帮助和建议。

我正在开发一个需要全屏背景图片的网页。我现在正在使用＆＃34;身高：100％＆＃34;在两个选择器上：html和包含背景的部分。当我调整浏览器的宽度时，它看起来不错，但是当我调整浏览器的高度时，背景的高度也会崩溃。我想我想要完成的是：

当浏览器窗口在任何屏幕尺寸上最大化时，背景为全屏而没有水平滚动条。
当浏览器窗口的宽度较小时，背景图像将始终以背景为中心。
当浏览器窗口的高度较小时，请不要折叠高度并显示垂直滚动条。因为我在背景上得到了一些文字。我不希望文本转到其他部分。

还请提供一些建议，说明我如何开发一个对任何屏幕大小都友好的网页以及任何屏幕上的任何调整大小操作。任何包裹？任何工具？

Answer 1

试一试：

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/

Answer 2

如果您希望它覆盖整个页面，请在body元素上使用以下CSS代码：

body {
    background: url(path/to.image.png) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

这适用于所有浏览器。将网址替换为计算机上的网址或文件位置。不需要引用

Answer 3

请尝试在外部样式表中使用以下代码：

 html{background:url(folder_name/file_name.jpg) no-repeat center center fixed;
 background-size:cover;
 -moz-background-size:cover;
 -webkit-background-size:cover;
 -ms-background-size:cover;
 -o-background-size:cover;

Answer 4

请尝试使用此css代码。

log.info

CSS全屏背景图片大小

4 个答案: