手机端背景图片撑满整个屏幕

HTML设置一个空div，用来放置背景图片。

<body>
    <div class=“main”></div>
</body>

（1）方法一：高度100%

html,body{
    margin:0;
    height:100%;
}
.main{
    height:100%;
    background:url(‘./bg.png‘) no-repeat ;
}

（2）方法二：高度100vh

.main{
    height:100vh;
    width:100vw;
}

原文地址：https://www.cnblogs.com/xmlearning/p/9829486.html

时间： 2024-11-10 01:03:48

手机端背景图片撑满整个屏幕的相关文章

设置背景图片的两种方式，并解决手机端背景图片高度自适应问题

1 设置背景图片的两种方式: 方式一: <img src="../img/10.jpg"/ class="back" id="Background"> .back{ position: fixed; width: 100%; height: 100%; display: block; z-index: -100; } 方式二:div class="body" id="Background">

IE9以下通过css让html页面背景图片铺满整个屏幕

第一种方法不设为背景图片,通过css来控制样式,可兼容到IE6,代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="author" content="chaozhang5"> <meta name="mail" content=&qu

在body只有一个div的时候,可以通过这样的方式让div撑满整个屏幕. 1.给div设置定位. 复习一下-- css中position有五种属性: static:默认值,没有定位 absolute:绝对定位,相对于父级元素进行定位 relative:相对定位 fixed:固定定位,相对于浏览器窗口进行定位 inherit:从父元素继承定位信息除了默认值static和inherit之外,添加其他三种都可以实现窗口自适应. 代码如下: 1 <style> 2 *{ 3 margin: 0; 4

帝国cms 图片相对路径绝对路径设置问题+帝国cms 手机端调用图片问题

首先说第一个问题:帝国cms 图片相对路径绝对路径设置问题这个是直接在后台可以设置的: 系统--系统设置--系统参数设置--基本属性--修改附件地址-- /d/file/(相对路径) http://www.qyhongyan.com/d/file/(绝对路径) 解决上面问题的前提是在制作之初就选定,不然后期改回很纠结的从上面问题我们又会衍生出新的问题: 1.使用绝对路径:pc调用正常,手机调用也正常,但是有一个问题就是不可"移植" 如果域名更换,所有的图片链接全部失效,需要重新上传

css background-size与背景图片填满div

background-size与背景图片填满div 在开发中,常有需要将一张图片作为一个div的背景图片充满div的需求 background-size的取值及解释 background-size共有三种属性,分别为 background-size: cover MDN文档解释说明:缩放背景图片以完全覆盖背景区,可能背景图片部分看不见.A keyword that is the inverse of contain. Scales the image as large as possible a

背景图片铺满body

添加背景图片: 添加样式代码如下: <style type="text/css"> body { background: url("image/bg.jpg") top center no-repeat; background-size: cover; } </style> 最终效果如下图所示:

背景图片铺满屏幕-------Day85

你有没有遇到过一种情况,你特别喜欢一张图片,可是可惜的是这张图片就小了那么一丁点.但有小片留白啊,那就不好看了啊.你有没有过呢,我不知道,但我真的就碰到了.我特喜欢那张图,就想让它做背景,可就小了点.于是我就想办法了. background-size:cover: background-size:contain. 两个看起来几乎相同,实际原理还真不一样: cover.翻译过来就是"覆盖",这是纯正的背景铺满了元素,它会比較图片的长和宽.哪一个比較小,它就以哪一个为基准进行扩大.图片的本

让div撑满整个屏幕

1.0 <style> *{ margin: 0; padding: 0; } div{ width:100%; height: 100%; background: yellow; position: absolute; } </style> <body> <div></div> </body> 2.0 html,body{ width: 100%; height: 100%; } div{ width:100%; height: 1