今天也是偶然遇到这个问题的，平成很少用到关于css的内容，就在网上找了很多个方法，最后总结以下几种很实用的方法

方法1：

<style>

body{
background:url(beijingtu.gif) top left;
background-size:100%;

}

</style>

方法二：

<body>

<div id="Layer1" style="position:absolute; width:100%; height:100%; z-index:-1">

<img src="beijingtu.gif" height="100%" width="100%"/>

</div>

</body>

方法三：

先使用一个style标签

<style>

.background_img{

background:url("beijingtu.gif") no-repeat;

background-size: 100%; //这一设置把图片铺满整个背景

}

</style>

然后在body里使用

<body class="background_img"> 网页内容 </body>

H5 背景图片自适应屏幕问题解决办法的更多相关文章

  1. bootstrop设置背景图片自适应屏幕

    如果不用bootstrop框架,想让背景图片自适应窗口大小,可以这样做: <style type="text/css"> html{height: %;} body.a ...

  2. 关于iphone 6 ios8网站背景图片错乱的问题解决办法

    最近公司有个客户的网站用手机safari打开出现背景图片错乱,本来应该显示A图片的却显示B图片,网速越慢的情况下越容易出现这种问题,悲催的是这种情况只在iPhone 6上出现,并且不是一直这样,多刷新 ...

  3. css -- 背景图片自适应屏幕大小

    由于<body>标签的图片不能够拉伸, 解决办法: 1.图片不够大,又background属性不能拉伸图片: 2.只能用个div,把其z-index值设为负,并使这个div大小为整个bod ...

  4. 【Python全栈-CSS】CSS实现网页背景图片自适应全屏

    CSS实现网页背景图片自适应全屏 功能:实现能自适应屏幕大小又不会变形的背景大图,而且背景图片不会随着滚动条滚动而滚动. 以下是用CSS实现的方法: <html> <head> ...

  5. 基于html5背景图片自适应代码

    基于html5背景图片自适应代码是一款背景不随滚动条滚动,会根据分辨率不同自动匹配对应的背景图片.效果图如下: 在线预览   源码下载 实现的代码. css代码: .jawbone-hero .jaw ...

  6. background--详解(背景图片根据屏幕的自适应)

    background:有以下几种属性: background-color background-position background-size background-repeat backgroun ...

  7. CSS实现网页背景图片自适应全屏

    一张清晰漂亮的背景图片能给网页加分不少,设计师也经常会给页面的背景使用大图,我们既不想图片因为不同分辨率图片变形,也不希望当在大屏的情况下,背景有一块露白,简而言之,就是实现能自适应屏幕大小又不会变形 ...

  8. css 背景图片自适应元素大小

    一.一种比较土的方法,<img>置于底层. 方法如下: CSS代码: HTML: <img src="背景图片路径" /> <span>字在背景 ...

  9. CSS实现网页背景图片自适应全屏,自适应背景图片

    一张清晰漂亮的背景图片能给网页加分不少,设计师也经常会给页面的背景使用大图,我们既不想图片因为不同分辨率图片变形,也不希望当在大屏的情况下,背景有一块露白,简而言之,就是实现能自适应屏幕大小又不会变形 ...

随机推荐

  1. 跳出"低水平勤奋陷阱"

    "低水平勤奋陷阱":摘记更多的知识 读书是获得知识的最基本,最重要的方式,但读书需要方法 所谓"低水平勤奋陷阱",就是花费了大量的时间和精力,但得到的结果却微乎 ...

  2. ros相关笔记

    catkin_make不编译某些package https://answers.ros.org/question/54181/how-to-exclude-one-package-from-the-c ...

  3. Java的23种设计模式，详细讲解（二）

    本人免费整理了Java高级资料,涵盖了Java.Redis.MongoDB.MySQL.Zookeeper.Spring Cloud.Dubbo高并发分布式等教程,一共30G,需要自己领取.传送门:h ...

  4. 深入理解JVM，7种垃圾收集器

    本人免费整理了Java高级资料,一共30G,需要自己领取.传送门:https://mp.weixin.qq.com/s/JzddfH-7yNudmkjT0IRL8Q 如果说收集算法是内存回收的方法论, ...

  5. docker下安装Redis

    Docker介绍 1.节约时间.快速部署和启动 2.节约成本 3.标准化应用发布 4.方便做持续继承 5作为集群中的轻量主机或节点 6.方便构建基于SOA或者微服务架构的系统 Docker中文文档 h ...

  6. 协议分析中的TCP/IP网络协议

    - 链路层 第一层包含源mac及目的mac,随着传输路径的变化会发生变化,在mac之后,是下层网络协议的类型,图中,下层为IP协议. 在协议解析中,需要关注的是图中type这个字段的内容. - 网络层 ...

  7. 【转载】更简单的学习Android事件分发

    事件分发是Android中非常重要的机制,是用户与界面交互的基础.这篇文章将通过示例打印出的Log,绘制出事件分发的流程图,让大家更容易的去理解Android的事件分发机制. 一.必要的基础知识 1. ...

  8. ADB常用命令（adb常用命令）

    基本用法 命令语法 adb 命令的基本语法如下: adb [-d|-e|-s <serialNumber>] <command> 如果只有一个设备/模拟器连接时,可以省略掉 [ ...

  9. 移动端底部导航固定配合vue-router实现组件切换

    在我们平时练习或者实际项目中也好,我们常常遇到这么一个需求:移动端中的导航并不是在顶部也不是在底部,而是在最底部且是固定的,当我们点击该导航项时会切换到对应的组件.相信对于很多朋友而言,这是一个很简单 ...

  10. [视频教程] 使用docker的方式安装redis

    直接使用docker拉取redis的镜像,并且进行端口映射与文件目录共享,这样可以直接在宿主机的端口上就可以进行访问了.其实本质上也是在一个简化版的ubuntu的容器内安装好的redis-server ...