网页背景图是我们常用的功能,一般来说。给网页加一个背景图,只要在网页的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>

转载于:https://www.cnblogs.com/officexie/p/3254622.html

css为网页顶部和底部都加入背景图相关推荐

  1. python博客下载本地文件_解决django无法访问本地static文件(js,css,img)网页里js,cs都加载不了...

    1.今天网上下载一个博客项目,发现本地访问,js,css加载不了. 我想应该是项目上线的安全措施,但是我想调试项目.找到方法如下 在settings.py里面编辑 添加 STATICFILES_DIR ...

  2. HTML+CSS静态网页练习案例(转动的八卦图)

    HTML+CSS静态网页练习案例(转动的八卦图) 需要的知识 1.div标签的运用 2.id选择器,后代选择器, 3.简单的css样式长,宽,高,背景颜色,浮动,绝对定位,边框弧度 4.div的布局特 ...

  3. html简单网页代码 案例_HTML+CSS静态网页练习案例(转动的八卦图)

    需要的知识 1.div标签的运用 2.id选择器,后代选择器, 3.简单的css样式长,宽,高,背景颜色,浮动,绝对定位,边框弧度 4.div的布局特点 静态的完成效果 动态效果(点击链接观看) 太极 ...

  4. html网页左侧背景,CSS设置html网页背景图片 CSS设置网页背景颜色

    CSS设置网页背景图片 CSS设置网页背景颜色技术教程篇 本篇DIVCSS5以布局思想介绍使用CSS设置实现网页背景技巧为主,希望对DIV CSS爱好者有帮助.通常对网页设置背景直接对body设置背景 ...

  5. CSS设置html网页背景图片 CSS设置网页背景颜色

    http://www.divcss5.com/jiqiao/j768.shtml CSS设置网页背景图片 CSS设置网页背景颜色技术教程篇 本篇DIVCSS5以布局思想介绍使用CSS设置实现网页背景技 ...

  6. 国家哀悼日,所有网页的主题色都变成灰色是怎么做到的?

    今天是全国人民向抗击新型冠状病毒肺炎疫情斗争牺牲的烈士和逝世的同胞表达哀悼的日子,为了响应号召,各大网站都把自己网站的主题色变成了灰色. 闲在家里无事浏览网页时我就很好奇,是怎么能做到把整个网页的字体 ...

  7. 漂亮大气的html导航页面,jquery+css打造位于网页顶部漂亮黄色下拉导航

    jquery+css打造位于网页顶部漂亮黄色下拉导航 - www.webdm.cn $(document).ready(function(){ $(".btn-slide").cl ...

  8. 【CSS】图片底部空白缝隙处理 ( 使用居中对齐 / 顶部对齐 / 底部对齐 | 将行内元素 / 行内块元素转为块级元素 )

    文章目录 一.图片底部空白缝隙问题 二.图片底部空白缝隙问题解决方案一 ( 使用居中对齐 / 顶部对齐 / 底部对齐 ) 三.图片底部空白缝隙问题解决方案二 ( 将行内元素 / 行内块元素转为块级元素 ...

  9. 《Dreamweaver CS6 完全自学教程》笔记 第十四章:使用 CSS 设计网页

    文章目录 第十四章:使用 CSS 设计网页 14.1 CSS 样式表简介 14.2 CSS 的基本语法 14.3 伪类.伪元素以及样式表的层叠顺序 14.3.1 伪类和伪元素 14.3.2 样式表的层 ...

最新文章

  1. xp大容量u盘补丁_Win XP系统下载与安装(U盘)
  2. tornado缓存技术
  3. 开源 java CMS - FreeCMS2.3会员注册
  4. Go 语言编程 — 使用 delve 进行 DEBUG 调试
  5. Android 进程间通信 实例分析
  6. android 垂直 SeekBar 源代码(VerticalSeekBar)[转]
  7. java并发之线程池
  8. POS Tagging 标签类型查询表(Penn Treebank Project)
  9. 乐高spike python_SPIKE Prime科创套装 篇四:乐高教育SPIKE Prime入门编程和搭建活动教学...
  10. FMEA-MSR 步骤四:失效分析
  11. 行业分析常用到的21个网站
  12. 29 - Excel 图表与数据分析
  13. Speedoffice(excel)如何运用公式通过身份证号码提取出性别
  14. Linux DMA 内dwc_prep_slave_sg函数与device_prep_dma_cyclic函数
  15. TYPEC-CC逻辑芯片-E-MARK数据线-浅析
  16. 360校招失败的惨痛经历
  17. 如何自定义文档工程师绩效考核标准? | 职场杂谈
  18. win10系统快速进入bios的设置方法
  19. 《迅雷链精品课》第一课:认识区块链
  20. 编译Busybox产生的两个错误

热门文章

  1. 基于AppDomain的插件式开发
  2. 动态页面加载速度太慢
  3. 网站的domain不在首页的原因
  4. 总结:Oracle快速入门
  5. 1001.Reverse Root
  6. Linux 相关发音
  7. Oracle性能误区--MTS,RAC,分区,并行查询
  8. TextWatcher() 的用法
  9. QuickContact分析及其弹出窗口实现
  10. android jni打印log信息