只需要在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. Ubuntu shell系统的环境变量

    1.系统环境变量env命令查看 1)利用export命令导出环境变量 export PS1 导出PS1 添加路径 export PATH=$PATH:/home/daokr/myfile $ sudo ...

  2. 可能需要用到的Mac技巧or软件

    1. Mac 打开任意来源 本博文链接:https://www.cnblogs.com/toulanboy/ 1.1. 打开 在终端中,输入命令sudo spctl --master-disable, ...

  3. spark_API

    1.概述 总的来讲,每一个spark驱动程序应用都由一个驱动程序组成,该驱动程序包含一个由用户编写的main方法,该方法会在集群上执行一些并行计算操作.Spark最重要的一个概念是弹性分布式数据集,简 ...

  4. [RK3399] ES8316+NS4150 播放视频只有背景音，播放歌曲有的有声音，有的无声音

    CPU:RK3399 系统:Android 音频IC:ES8316 功放IC:NS4150 以前也在 RK3399 上调试过 ES8316,功能都正常,新主板只是更换了功放IC,就出现无声音的问题(仔 ...

  5. JVM相关文章和GC原理算法

    参考推荐: Java内存模型及GC原理 一个优秀的Java程序员必须了解的GC机制 Android 智能指针原理(推荐) Java虚拟机规范 Java虚拟机参数 Java内存模型 Java系列教程(推 ...

  6. ORA-39142: incompatible version number 5.1 in dump file

    ORA-39142: incompatible version number 5.1 in dump file http://blog.itpub.net/26664718/viewspace-214 ...

  7. rsync详解之exclude排除文件【转】

    rsync详解之exclude排除文件 问题:如何避开同步指定的文件夹?  --exclude rsync  --exclude files and folders http://articles.s ...

  8. ArcPy python实例教程-条件平差-测量平差

    ArcPy python实例教程-条件平差-测量平差 商务合作,科技咨询,版权转让:向日葵,135-4855__4328,xiexiaokui#qq.com 输入参数:条件方程的系数,观测值,常数项和 ...

  9. linux系统中如何查看acpi信息？

    答: 进入/sys/firmware/acpi/tables, 然后输入tree命令即可查看acpi信息

  10. Cannot find module 'laravel-elixir'问题解决方法

    在用gulp 安装elixir的时候报了这样的错误: Laravel elixir npm error Cannot find module 'laravel-elixir/ingredients/c ...