首页 > 其他分享 >CSS背景图无法铺满的问题

CSS背景图无法铺满的问题

时间:2022-10-19 19:12:59浏览次数:47  
标签:body 100% 铺满 height width 背景图 CSS

html和body设置为100%,当body中的内容超出后,设置的背景图片无法铺满整个屏幕。

点击查看代码
html,body{
    width:100%;
    height:100%;
}
.home{
     width:100%;
    height:100%;
    background: url("../assets/xiazai.jpg") no-repeat;
    background-size: 100% 100%;
}

解决:把背景图设置到body上就行了。

标签:body,100%,铺满,height,width,背景图,CSS
From: https://www.cnblogs.com/coderz1/p/16807400.html

相关文章

  • css属性学习 text-align-last
     该属性用于决定元素的最后一个一行如何排列且只在text-align:justify;的情况下生效text-align-last:justify;注意:在英文中使用时需要在要隔开的地方加空格有了......
  • CSS特效集锦(9款 , 总有一款是你喜欢的)
    主要是:穿越时空特效,图片放大镜,3D相册,立方体相册,昼夜更替特效,飘雪,七彩雨,签名生成器,水波纹动画等​ ​附件下载​​穿越时空特效 图片放大镜特......
  • 如何添加CSS 文字背景水印
    这里给大家介绍一种实用的技术,可以让文字作为CSS背景图片。利用 SVG来给界面添加背景水印语法结构<imgsrc="zhangxinxu.svg">此时的zhangxinxu.svg就是一个图像,同......
  • CSS特效集锦(9款 , 总有一款是你喜欢的)
    主要是:穿越时空特效,图片放大镜,3D相册,立方体相册,昼夜更替特效,飘雪,七彩雨,签名生成器,水波纹动画等​​附件下载​​穿越时空特效图片放大镜特效3D相册特效立......
  • css简单学习
       css简单了解即可......
  • css使内部元素纵向均匀排列
     flex里的两个属性连用即可达到想要的效果(写一个长方形flex盒子,并使内部元素纵向排列)flex-direction:column;justify-content:space-around;flex-direction属......
  • 11. CSS链接样式(4种)
    1.前言链接是网站的重要组成部分,几乎在每个网页上都能看到不少的链接,合理的设计链接的样式能够给网页的颜值加分。链接有四种不同的状态,分别是link、visited、active和......
  • 10. CSS文本格式化
    1.前言通过CSS中的文本属性您可以像操作Word文档那样定义网页中文本的字符间距、对齐方式、缩进等等,CSS中常用的文本属性如下所示:text-align:设置文本的水平对齐方......
  • 8. CSS background(背景)
    1.前言在制作网页时我们往往需要在网页中添加一些背景颜色、背景图像让网页更加美观,吸引访问者的眼球。CSS中提供了一系列用于设置HTML元素背景效果的属性,如下所示:b......
  • OpenCV技巧 | 常用格式图片保存为透明背景图片(附Python源码)-教你轻松制作Logo
    导读本文主要介绍使用OpenCV将常用格式图片保存为透明背景图片的方法与实现代码。实现目标本文的目标有如下两个:①将常见格式[jpg/png/bmp]白色背景图片转换保存为透明背......