编程 Javascript

HTML中使背景图片自适应浏览器大小实例详解

Posted in Javascript onApril 06, 2017

HTML中使背景图片自适应浏览器大小实例详解

解决办法：

1、图片不够大，又background属性不能拉伸图片；

2、只能用个div，把其z-index值设为负，并使这个div大小为整个body大小，在div里用<img> ；

3、body的background属性去掉，要不然会被遮住。

<html> 
<body> 
<div id="Layer1" style="position:absolute; left:0px; top:0px; width:100%; height:100%"> 
<img src="pictures/background.jpg" width="100%" height="100%"/> 
</div> 
</body> 
</html>

如果想让图片不随浏览器右边滚动条滚动，就用position:fixed属性。wordpress建站的达人们也可以用此方法，在指定页面定制自己的背景图片。

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

HTML中使背景图片自适应浏览器大小实例详解

- Author -

lqh

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

用javascript实现页面打印的三种方法

Mar 05 Javascript

Javascript 继承机制实例

Aug 12 Javascript

javascript dom代码应用简单的相册[firefox only]

Jun 12 Javascript

jQuery页面滚动浮动层智能定位实例代码

Aug 23 Javascript

js用正则表达式来验证表单(比较齐全的资源)

Nov 17 Javascript

jQuery遍历对象、数组、集合实例

Nov 08 Javascript

JavaScript检测字符串中是否含有html标签实现方法

Jul 01 Javascript

js 轮播效果实例分享

Dec 28 Javascript

带你快速理解javascript中的事件模型

Aug 14 Javascript

javascript json对象小技巧之键名作为变量用法分析

Nov 11 Javascript

Vue Object.defineProperty及ProxyVue实现双向数据绑定

Sep 02 Javascript

antd Form组件方法getFieldsValue获取自定义组件的值操作

Oct 29 Javascript

ES6中的箭头函数实例详解

Apr 06 #Javascript

ES6字符串模板，剩余参数，默认参数功能与用法示例

Apr 06 #Javascript

详谈js遍历集合(Array,Map,Set)

Apr 06 #Javascript

javascript中this用法实例详解

Apr 06 #Javascript

selenium 与 chrome 进行qq登录并发邮件操作实例详解

Apr 06 #Javascript

js遍历获取表格内数据的方法(必看)

Apr 06 #Javascript

JS优化与惰性载入函数实例分析

Apr 06 #Javascript

You might like

php下尝试使用GraphicsMagick的缩略图功能

2011/01/01 PHP

ajax 的post方法实例(带循环)

2011/07/04 PHP

20个非常有用的PHP类库加速php开发

2010/01/15 Javascript

node.js中的http.get方法使用说明

2014/12/14 Javascript

javascript实现起伏的水波背景效果

2016/05/16 Javascript

easyUI实现(alert)提示框自动关闭的实例代码

2016/11/07 Javascript

JavaScript实现多栏目切换效果

2016/12/12 Javascript

Javascript中字符串相关常用的使用方法总结

2017/03/13 Javascript

关于axios返回空对象的问题解决

2017/04/04 Javascript

angularjs指令之绑定策略（@、=、&）

2017/04/13 Javascript

react.js 获取真实的DOM节点实例(必看)

2017/04/17 Javascript

Javarscript中模块(module)、加载(load)与捆绑(bundle)详解

2017/05/28 Javascript

react-router中的属性详解

2017/06/01 Javascript

vue cli 3.0 搭建项目的图文教程

2019/05/17 Javascript

vue实现移动端图片上传功能

2019/12/23 Javascript

微信小程序实现手指拖动选项排序

2020/04/22 Javascript

JavaScript缓动动画函数的封装方法

2020/11/25 Javascript

[01:02:54]完美世界DOTA2联赛PWL S2 FTD vs GXR 第一场 11.22

2020/11/26 DOTA

使用python编写android截屏脚本双击运行即可

2014/07/21 Python

Python使用matplotlib实现在坐标系中画一个矩形的方法

2015/05/20 Python

Django验证码的生成与使用示例

2017/05/20 Python

简单实现python收发邮件功能

2018/01/05 Python

Python开发网站目录扫描器的实现

2019/02/21 Python

python 标准差计算的实现（std）

2019/07/29 Python

Python的形参和实参使用方式

2019/12/24 Python

Python Django中间件使用原理及流程分析

2020/06/13 Python

Python logging日志模块配置文件方式

2020/07/12 Python

Python confluent kafka客户端配置kerberos认证流程详解

2020/10/12 Python

详解利用css3的var()实现运行时改变scss的变量值

2021/03/02 HTML / CSS

YSL圣罗兰美妆英国官网：Yves Saint Laurent Beauty UK

2019/08/03 全球购物

股东合作协议书

2014/09/12 职场文书

2014年重阳节活动策划方案书

2014/09/16 职场文书

2015年毕业实习工作总结

2015/05/29 职场文书

2016大学生国家助学贷款承诺书

2016/03/25 职场文书

redis 存储对象的方法对比分析

2021/08/02 Redis

MySQL串行化隔离级别(间隙锁实现)

2022/06/16 MySQL