今天也是偶然遇到这个问题的，平成很少用到关于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. python的__future__模块

    一.概述 Python的每个新版本都会增加一些新的功能,或者对原来的功能作一些改动.有些改动是不兼容旧版本的,也就是在当前版本运行正常的代码,到下一个版本运行就可能不正常了.从Python 2.7到P ...

  2. Luogu P3600 随机数生成器

    Luogu P3600 随机数生成器 题目描述 sol研发了一个神奇的随机数系统,可以自动按照环境噪音生成真·随机数. 现在sol打算生成\(n\)个\([1,x]\)的整数\(a_1...a_n\) ...

  3. 转载-ThreadPoolExecutor里面4种拒绝策略（详细）

    原文链接:https://blog.csdn.net/wjs19930820/article/details/79849050 1 /** * 定义异步任务执行线程池 */ @Configuratio ...

  4. 用.net core实现反向代理中间件

    最近在将一些项目的rest api迁移到.net core中,最开始是用的Nginx做反向代理,将已经完成切换的部分切入系统,如下图所示: 由于迁移过程中也在进行代码重构,需要经常比较频繁的测试,以保 ...

  5. python将oracle数据库保存到excel

    上代码: import pandas as pd import SqlHelper.ORACLE as ORA if __name__ == '__main__': #连接数据库 ms = ORA.O ...

  6. JS基础语法---数组基础知识总结

     数组: 存储一组有序的数据  数组的作用: 一次性存储多个数据 数组的定义方式: 1.构造函数定义数组: var 数组名=new Array(); 2.字面量方式定义数组: var 数组名=[]; ...

  7. Web基础--HTML、Css入门

    一.Web项目(可跳过,直接从下一个标题开始) 1.Web项目: 指的是带网页的项目,通过浏览器可以访问的项目.比如:淘宝.天猫等. 2.Web项目构成: 浏览器(客户端).服务器.数据库. 3.Ja ...

  8. 分布式服务防雪崩熔断器(Hystrix)，实现服务降级

    Hystrix是什么? hystrix对应的中文名字是“豪猪”,豪猪周身长满了刺,能保护自己不受天敌的伤害,代表了一种防御机制,这与hystrix本身的功能不谋而合,因此Netflix团队将该框架命名 ...

  9. flex弹性布局没有生效

    display: -webkit-flex; /* 新版本语法: Chrome 21+ */ display: -webkit-box; /* 老版本语法: Safari, iOS, Android ...

  10. -force_load （加载静态库崩溃）

    -force_load   Crash Log: Last Exception Backtrace: 0   CoreFoundation                 0x2f087f06 __e ...