只需要在head中增加如下代码即可

<head>

{#设置背景#}

    <style>

        body {

            height: 100%;width: 100%;

            background: url("{% static 'img/abc-1.jpg'%}");

            background-size:cover;

        }

    </style>

</head>

HTML:给body增加全屏的背景图的更多相关文章

  1. HTML5轻松实现全屏视频背景

    想在你的网页首页中全屏播放一段视频吗?而这段视频是作为网页的背景,不影响网页内容的正常浏览.那么我告诉你有一款Javascript库正合你意,它就是Bideo.js. 参考网址: https://ww ...

  2. tinymce插件preview改造增加全屏按钮

    近期需要用到tinymce的preview插件,但preview出来的界面太小了,通过投影仪出来看的不清晰,于是想在preview的预览界面中增加全屏.放大和缩小的按钮,改造内容如下: 由于previ ...

  3. 基于js全屏动画焦点图幻灯片

    今天给大家分享一款基于js全屏动画焦点图幻灯片.这款焦点图内的内容以动画形式出现和消失.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="sl ...

  4. 最全面的DialogFragment的使用，实现DialogFragment全屏、背景透明；

    Android推荐使用DialogFragment代替Dialog,好处就说一点吧,DialogFragment就是个盖在界面上的Fragment,它拥有Fragment一样的功能和生命周期,解决普通 ...

  5. CSS实现网页背景图片自适应全屏,自适应背景图片

    一张清晰漂亮的背景图片能给网页加分不少,设计师也经常会给页面的背景使用大图,我们既不想图片因为不同分辨率图片变形,也不希望当在大屏的情况下,背景有一块露白,简而言之,就是实现能自适应屏幕大小又不会变形 ...

  6. JFrame 实现全屏透明背景

    JFrame f=new JFrame(); f.setUndecorated(true);        f.setBackground(new Color(0,0,0,0));        To ...

  7. Delphi下实现全屏快速找图找色

    前言 最近有好几个朋友都在问我找图找色的问题,奇怪?于是乎写了一个专门用于找图找色的单元文件“BitmapData.pas”.在这个单元文件中我实现了从文件中导入位图.屏幕截图.鼠标指针截图.在图片上 ...

  8. Swiper 移动端全屏轮播图效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  9. html-css控制背景图全屏拉伸不重复显示

    在HTML中,当我们设置背景图,只能采用是否重叠.居中.重叠方向这几个选项 CSS3中设置 body { background:#3d71b8 url(../back_main.png); backg ...

随机推荐

  1. 布鲁克斯法则 (Brooks's Law)

    软件开发后期,添加人力只会使项目开发得更慢. 这个定律表明,在许多情况下,试图通过增加人力来加速延期项目的交付,将会使项目交付得更晚.布鲁克斯也明白,这是一种过度简化.但一般的推理是,新资源的增加时间 ...

  2. C宏定义和使用

    #include <stdio.h> #include "head.h" #define TRUE 1 #define FALSE 0 #if defined (TRU ...

  3. 数码管一些列功能的verilog实现

    将数码管各段发光元件的正极连在一起称为共阳数码管,且该共点击链接电路电源的正极,而各段的负极连接驱动电路.它适用于低电平有效的驱动电路,当某段的驱动电平为低电平时,该段发亮:将数码管各段发光元件的负极 ...

  4. 深入基础(二)练习题,REPL交互解析器

    NPM     关于npm命令其实不算很多很多,起码比dos命令少不少呢废话少说npm命令大全and各个命令用处持续更新中..来自园子内另外一位大神~:http://www.cnblogs.com/P ...

  5. CSP-S2019 快乐爆0

    hhh 我爆0了 快乐 大家都比我强 hh 常规操作 本来就是个憨憨 回去复习文化课了 唉 干啥啥不行

  6. SQL数据清洗

    大家好,我是jacky,很高兴继续跟大家分享<MySQL数据分析实战>,从本节课程开始,我们的课程就会变得越来越实战,也会越来越有意思了: 我们课程的主体叫MySQL数据分析实战,那我们用 ...

  7. linux管道pipe详解

    linux管道pipe详解 https://blog.csdn.net/qq_42914528/article/details/82023408

  8. 模板 - 数据结构 - 可持久化无旋Treap/PersistentFHQTreap

    有可能当树中有键值相同的节点时,貌似是要对Split和Merge均进行复制的,本人实测:只在Split的时候复制得到了一个WA,但只在Merge的时候复制还是AC,可能是恰好又躲过去了.有人说假如确保 ...

  9. window.location.href在微信端不起作用的解决方法?

    在我从第一张图的某个活动进去到详情页,点击返回是可以的,这里我是用了一个click事件,window.location.href="某死链接" 但是第二次进去点击之后点击事件是可以 ...

  10. Linux下DM无法显示建模界面的解决方法

    方法来源: http://www.linuxhospital.com/read/unable-to-resolve-function-glxqueryextension-in-hyperview.ht ...