编程 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图片的展开和收缩实现代码

Apr 16 Javascript

基于jquery的9行js轻松实现tab控件示例

Oct 12 Javascript

Three.js学习之网格

Aug 10 Javascript

微信小程序教程之wxapp视图容器 swiper

Oct 19 Javascript

JS jQuery使用正则表达式去空字符的简单实现代码

May 20 jQuery

微信小程序request出现400的问题解决办法

May 23 Javascript

JavaScript数据结构之双向链表和双向循环链表的实现

Nov 28 Javascript

JavaScrip关于创建常量的知识点

Dec 07 Javascript

jQuery实现表单动态添加数据并提交的方法

Jul 19 jQuery

泛谈JS逻辑判断选择器 || &&

May 24 Javascript

createObjectURL方法实现本地图片预览

Sep 30 Javascript

微信JSSDK实现打开摄像头拍照再将相片保存到服务器

Nov 15 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

BBS(php & mysql)完整版(三)

2006/10/09 PHP

聊天室php&mysql(五)

2006/10/09 PHP

ThinkPHP公共配置文件与各自项目中配置文件组合的方法

2014/11/24 PHP

php实现使用正则将文本中的网址转换成链接标签

2014/12/03 PHP

Zend Framework创建自己的动作助手详解

2016/03/05 PHP

PHP耦合设计模式实例分析

2018/08/08 PHP

php微信公众号开发之秒杀

2018/10/20 PHP

PHP实现简单的计算器

2020/08/28 PHP

JavaScript 弹出窗体点击按钮返回选择数据的实现

2010/04/01 Javascript

利用jquery动画特效和css打造的侧边弹出垂直导航

2014/04/04 Javascript

js中的getAttribute方法使用示例

2014/08/01 Javascript

javascript搜索框效果实现方法

2015/05/14 Javascript

js实现图片360度旋转

2017/01/22 Javascript

bootstrap fileinput 插件使用项目总结(经验)

2017/02/22 Javascript

vue.js如何将echarts封装为组件一键使用详解

2017/10/10 Javascript

Vue v2.4中新增的$attrs及$listeners属性使用教程

2018/01/08 Javascript

jQuery实现动态显示select下拉列表数据的方法

2018/02/05 jQuery

JS开发富文本编辑器TinyMCE详解

2019/07/19 Javascript

解决Layui 表格自适应高度的问题

2019/11/15 Javascript

Vue登录拦截登录后继续跳转指定页面的操作

2020/08/04 Javascript

[01:06]DOTA2小知识课堂 Ep.01 TP出门不要忘记帮队友灌瓶哦

2019/12/05 DOTA

[01:11]steam端dota2实名认证操作流程视频

2021/03/11 DOTA

利用python实现在微信群刷屏的方法

2019/02/21 Python

python算法与数据结构之冒泡排序实例详解

2019/06/22 Python

django 单表操作实例详解

2019/07/30 Python

flask框架渲染Jinja模板与传入模板变量操作详解

2020/01/25 Python

Python开发之pip安装及使用方法详解

2020/02/21 Python

Python判断字符串是否为空和null方法实例

2020/04/26 Python

eDreams德国：南欧领先的在线旅游公司

2020/12/07 全球购物

机电一体化职业规划书

2014/01/07 职场文书

优秀党员学习焦裕禄精神思想汇报范文

2014/09/10 职场文书

假期安全教育广播稿

2014/10/04 职场文书

2015年植树节活动总结

2015/02/06 职场文书

2015年党日活动总结范文

2015/03/25 职场文书

技术入股协议书

2016/03/22 职场文书

关于python爬虫应用urllib库作用分析

2021/09/04 Python