HTML代码

<body id="body">

    <div class="info-wrapper">

        <div class="content">

        </div>

     </div>

</div>

CSS代码

body{

　　font-size: 16px;

　　font-family: Arial;

　　max-width: 1920px;

　　min-width: 1180px;

　　margin:0 auto;

　　overflow-y:scroll;

}

.info-wrapper{

    position: absolute;

    margin: 0px;

    width: 100%;

    height: 560px;

    top: 1563px;

    text-align: center;

}

.content{

    width: 100%;

    height: 560px;

    margin: 0 auto;

    overflow: hidden;

    background: url(../images/index/background.png) no-repeat;

}

JS代码

var screenWidth=$(window).width();

$("#body").css("width",screenWidth);

WEB网页如何让背景图片跟随可视窗口自适应大小的更多相关文章

  1. css网页中设置背景图片的方法详解

    在css代码中设置背景图片的方法,包括背景图片.背景重复.背景固定.背景定位等   用css设置网页中的背景图片,主要有如下几个属性: 1,背景颜色 {">说明:参数取值和颜色属性一样 ...

  2. 利用wget 抓取 网站网页 包括css背景图片

    利用wget 抓取 网站网页 包括css背景图片 wget是一款非常优秀的http/ftp下载工具,它功能强大,而且几乎所有的unix系统上都有.不过用它来dump比较现代的网站会有一个问题:不支持c ...

  3. 使用padding代替高度实现背景图片高度按比例自适应

    本篇文章由:http://xinpure.com/use-padding-instead-of-highly-adaptive-background-image-height-proportionat ...

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

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

  5. 网页设定固定背景图片(抄袭自百度FM)

    这个新技能,我是从百度FM中学习到的. 在网页中,有一个id为"body-bg"的层, html代码: <div id="body-bg" style=& ...

  6. 让背景图片跟随div大小变化代码

  7. 在web网页中正确使用图片格式

    今天又看了一遍淘宝平四分享的PPT,以前转载网址:http://blog.sina.com.cn/s/blog_995c1f6301017fd2.html

  8. 网页html结构右侧栏固定，左侧自适应大小。

    最近写了一个项目,写页面的结构,html树形结构是有header,container,footer部分,其中container部分是右侧栏是固定宽度,左侧是自适应宽度与屏幕高度. 第一次写的博客文章是 ...

  9. qt 设置背景图片

    博客出处:http://www.cppblog.com/qianqian/archive/2010/07/25/121238.htm 工作似乎走上正轨了,上周五的工作是做一个界面,用到QFrame和Q ...

随机推荐

  1. iis部署错误：HTTP 错误 500.21 - Internal Server Error

    将网站发布到IIS,访问发生如下错误: HTTP 错误 500.21 - Internal Server Error处理程序“PageHandlerFactory-Integr”在其模块列表中有一个错 ...

  2. Jodd发送邮件

    public static void main(String[] args) { Email email = Email.create().from("xxx") .to(&quo ...

  3. Linux 程式減肥(strip & objcopy)（转载）

    转自:http://calamaryshop.blogspot.com/2011/11/linux-strip-objcopy.html 對於設計嵌入式Linux系統的研發人員來說,記憶體的空間是非常 ...

  4. 洛谷P3768 简单的数学题（莫比乌斯反演+狄利克雷卷积+杜教筛）

    传送门 不会…… 两篇加在一起都看不懂…… https://www.cnblogs.com/cellular-automaton/p/8241128.html https://www.luogu.or ...

  5. 获取URL地址栏参数（正则表达式）

    ]] = isEncode ? decodeURIComponent(arg[2]) : arg[2]; }); return obj;}

  6. IT兄弟连 Java语法教程 Java语言入门 典面试题

    1．请说明JVM.JRE和JDK是什么?它们有什么关系? JVM是Java虚拟机,Java Virtual Machine的缩写,是一个虚构出来的计算机,通过在实际的计算机上仿真模拟各种计算机功能来实 ...

  7. 剑指Offer的学习笔记（C#篇）-- 连续子数组的最大和

    题目描述 HZ偶尔会拿些专业问题来忽悠那些非计算机专业的同学.今天测试组开完会后,他又发话了:在古老的一维模式识别中,常常需要计算连续子向量的最大和,当向量全为正数的时候,问题很好解决.但是,如果向量 ...

  8. java.lang.NoClassDefFoundError: com/sun/tools/javac/processing/JavacProcessingEnvironment

    最近项目用到了java程序动态编译java源文件,运行程序一直报错,提示错误如下: Can't initialize javac processor due to (most likely) a cl ...

  9. MySQL库相关操作

    ========MySQL库相关操作====== 一.系统数据库 information_schema: 虚拟库,不占用磁盘空间,存储的是数据库启动后的一些参数,如用户表信息.列信息.权限信息.字符信 ...

  10. 基于.NetCore2.1。服务类库采用.Net Standard2.0，兼容.net 4.6.1消息推送服务

    基于.NetCore2.1.服务类库采用.Net Standard2.0,兼容.net 4.6.1消息推送服务 https://www.cnblogs.com/ibeisha/p/weixinServ ...