网页背景图是我们常用的功能，一般来说。给网页加一个背景图，只要在网页的body标签中加入css属性就行。

代码如下:<body style="background-image:url(图片路径)">

底部的部分，我们要加入背景图，首先要看图片的高度。在高度合理的范围内加入div

<body style="background-image:url(顶部图片路径)">

<div class=“banner”></div>

<div class=“connet”></div>

<div class=“foot”></div>

</body>

如果要插入的图片高度不高于foot，可以为foot加入背景图，如果高了，就为 foot和connet 外面在包一个div。代码如下

<body style="background-image:url(顶部图片路径)">

<div class=“banner”></div>

<div style="background:bottom center url(底部背景图路径) no-repeat; width:100%;">

<div class=“connet”></div>

<div class=“foot”></div>

</div>

</body>

css为网页顶部和底部都加入背景图的更多相关文章

  1. CSS Div固定在网页顶部、底部、左侧、右侧

    Div固定在网页顶部 .header { width:100%; height:80px; background-color:#FAFAFA; position:fixed; top:; left:; ...

  2. jQuery&CSS 顶部和底部固定浮动工具栏 兼容IE6

    http://www.cnblogs.com/lhj588/archive/2013/04/02/2994639.html —————————————————————————————————————— ...

  3. ListView去除顶部和底部边缘阴影（亲测4.4及以前的版本都适用）

    ListView滑动到顶部和底部时出现的阴影消除方法:android2.3以前用android:fadingEdge="none"android2.3以后用android:over ...

  4. div+css对网页进行布局

    div+css对网页进行布局 首先在页面整体上进行div标签划分内容区域,然后再用css进行定位,最后再对相应的区域添加内容. 1.用div将页面划分 拿到网站页面图后,首先将分析页面分为哪几块,然后 ...

  5. Android ScrollView监听滑动到顶部和底部的两种方式（你可能不知道的细节）

    Android ScrollView监听滑动到顶部和底部,虽然网上很多资料都有说,但是不全,而且有些细节没说清楚 使用场景: 1. 做一些复杂动画的时候,需要动态判断当前的ScrollView是否滚动 ...

  6. 前端开发css实战：使用css制作网页中的多级菜单

    前端开发css实战:使用css制作网页中的多级菜单 在日常工作中,大家都会遇到一些显示隐藏类菜单,比如页头导航.二维码显示隐藏.文本提示等等......而这些效果都是可以使用纯css实现的(而且非常简 ...

  7. JS网页顶部弹出可关闭广告图层

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. DIV+CSS常用网页布局技巧！

    以下是我整理的DIV+CSS常用网页布局技巧,仅供学习与参考! 第一种布局:左边固定宽度,右边自适应宽度 HTML Markup <div id="left">Left ...

  9. link标签和script标签跑到body下面，网页顶部有空白

    用UltraEdit的16进制编辑模式查看代码,都是EF BB BF开头的,说明都是带BOM的.我手动的将所有文件转成UTF-8 without BOM.页面终于正常了.link,script标签乖乖 ...

随机推荐

  1. 整合Spring.net到asp.net网站开发中初探

    整合Spring.net到asp.net网站开发中初探 http://www.veryhuo.com 2009-10-21 烈火网 投递稿件 我有话说   Spring提供了一个轻量级的用于构建企业级 ...

  2. CAD二次开发（.NET）之PaletteSet和Palette

    在CAD中经常用到停靠或浮动的PaletteSet,比如:特性.图层特性管理器.工具选项板等(以下截图来自AutoCAD2010界面). 特性PaletteSet(停靠) 图层特性管理器Palette ...

  3. Redis中各种方法的使用

    ①set ; i< ; i++) { // 不可以重复添加数据 client.AddItemToSet(KKey, "dong升-" + i); } client.Remov ...

  4. $()和getElementById()的区别

    jQuery的成功多归功于其强大的选择器. 然而,相信不少初学jQuery的同学都会遇到下面的问题. 在javascript下,我们可以根据getElementById()来获取页面元素.如下: va ...

  5. CSS文本

    CSS文字及文本 导航:1.文字及文本2.例子 1.文字及文本文字: 单个字符文本: 多个字符的组合体 2.例子2.1.文字的颜色颜色属性被用来设置文字的颜色格式: color:色值颜色是通过CSS最 ...

  6. 通过class实例取得类的接口，父类，构造器

    interface China {     public static final String NATIONAL = "JAPAN";     public static fin ...

  7. ThinkPHP第二十五天(自动完成、用户名密码PHP正则、移位或加密函数)

    1.ThinkPHP自动完成功能 跟昨天的自动验证功能类似,也是需要在自定义的UserModel类,进行使用. 使用方法:定义$_auto属性 $_auto = array( array(完成字段,完 ...

  8. hdu 2295 Radar 重复覆盖+二分

    题目链接 给m个雷达, n个城市, 以及每个城市的坐标, m个雷达里只能使用k个, 在k个雷达包围所有城市的前提下, 求最小半径. 先求出每个雷达到所有城市的距离, 然后二分半径, 如果距离小于二分的 ...

  9. Zepto Api参考

    zepto API参考 简介 Zepto是一个轻量级的针对现代高级浏览器的JavaScript库, 它与jquery有着类似的api. 如果你会用jquery,那么你也会用zepto. 设计目的 ze ...

  10. 网络上USB后面跟AF或AM接口的意思

    AM to micro 5pin或AF to micro 5pin 这里的AM或AF是Type a male和Type a female的简写 Type a male:A型男士 Type a fema ...