首页 文章

CSS全屏背景图片大小[关闭]

提问于
浏览 次
0

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

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

  • 当浏览器窗口在任何屏幕尺寸上最大化时，背景是全屏而没有水平滚动条 .

  • 当浏览器窗口的宽度较小时，背景图像将始终以背景为中心 .

  • 当浏览器窗口的高度较小时，请不要让文本转到其他部分 .

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

html css

4 回答

  • 2

    请试试这个css代码 .

    body, 
 html{
min-height:100%; 
} 
body {
background-image:url(Beautiful-White-Horse.jpg);
background-repeat:no-repeat;
background-size:cover;
}
    回复于
  • 2

    给这个镜头：

    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/

    回复于
  • 1

    如果您希望它覆盖整个页面，请在 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;
}

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

    回复于
  • 1

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

    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;
    回复于

相关问题