编程 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 相关文章推荐

Jquery+JSon 无刷新分页实现代码

Apr 01 Javascript

js获取height和width的方法说明

Jan 06 Javascript

jQuery基本选择器选择元素使用介绍

Apr 18 Javascript

jQuery之选择组件的深入解析

Jun 19 Javascript

jQuery中replaceAll()方法用法实例

Jan 16 Javascript

jQuery中unbind()方法用法实例

Jan 19 Javascript

Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法

Jun 23 Javascript

原生js实现电商侧边导航效果

Jan 19 Javascript

详解Koa中更方便简单发送响应的方式

Jul 20 Javascript

layer.open组件获取弹出层页面变量、函数的实例

Sep 25 Javascript

Vue.js标签页组件使用方法详解

Oct 19 Javascript

javascript设计模式之迭代器模式

Jan 30 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 获取一个月第一天与最后一天的代码

2010/05/16 PHP

解析php扩展php_curl.dll不加载的解决方法

2013/06/26 PHP

基于jQuery的可以控制左右滚动及自动滚动效果的代码

2010/07/25 Javascript

js 实现css风格选择器（压缩后2KB）

2012/01/12 Javascript

jquery 插件学习（三）

2012/08/06 Javascript

javascript中bind函数的作用实例介绍

2014/09/28 Javascript

JavaScript调用客户端Java程序的方法

2015/07/27 Javascript

window.location.reload 刷新使用分析(去对话框)

2015/11/11 Javascript

bootstarp modal框居中显示的实现代码

2017/02/18 Javascript

jquery层次选择器的介绍

2019/01/18 jQuery

layui: layer.open加载窗体时出现遮罩层的解决方法

2019/09/26 Javascript

微信小程序音乐播放器开发

2019/11/20 Javascript

Js和VUE实现跑马灯效果

2020/05/25 Javascript

element跨分页操作选择详解

2020/06/29 Javascript

Vue实现计算器计算效果

2020/08/17 Javascript

Openlayers学习之地图比例尺控件

2020/09/28 Javascript

javascript实现数字时钟效果

2021/02/06 Javascript

详解Python list 与 NumPy.ndarry 切片之间的对比

2017/07/24 Python

Python断言assert的用法代码解析

2018/02/03 Python

Pyinstaller将py打包成exe的实例

2018/03/31 Python

python数字图像处理实现直方图与均衡化

2018/05/04 Python

Tornado Web Server框架编写简易Python服务器

2018/07/28 Python

numpy.linspace函数具体使用详解

2019/05/27 Python

解决Numpy中sum函数求和结果维度的问题

2019/12/06 Python

pytorch 中pad函数toch.nn.functional.pad()的用法

2020/01/08 Python

解决Keras 与 Tensorflow 版本之间的兼容性问题

2020/02/07 Python

keras load model时出现Missing Layer错误的解决方式

2020/06/11 Python

Python获取指定网段正在使用的IP

2020/12/14 Python

《赵州桥》教学反思

2014/02/17 职场文书

网络管理专业求职信

2014/03/15 职场文书

机关驾驶员违规检讨书

2014/09/13 职场文书

2015年服务员个人工作总结

2015/05/27 职场文书

《雪地里的小画家》教学反思

2016/02/16 职场文书

SpringBoot集成Redis的思路详解

2021/10/16 Redis

Python可视化学习之seaborn调色盘

2022/02/24 Python

Nginx中使用Lua脚本与图片的缩略图处理的实现

2022/03/18 Servers