只需要在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. greenplum 下载地址

    一.推荐使用下面下载地址 https://network.pivotal.io/products/pivotal-gpdb#/releases/158026/file_groups/1083 二.官网 ...

  2. (尚004)Vue计算属性之基本使用和监视

    所做效果预览: test004.html <!DOCTYPE html><html lang="en"><head> <meta char ...

  3. WinDbg 图形界面功能(二)

    1.2.编辑菜单 这个菜单可以提供Windbg里的各功能窗口的可选文本的编辑功能,比如源代码窗口.命令窗口等提供选择.复制.剪切和黏贴等基础编辑功能. 剪切 单击剪切上编辑菜单中,删除所选的任何文本并 ...

  4. 【JS】知识笔记

    一.JS文件位置 多个.JS文件最好合并到一个文件中,减少加载页面时发送的请求数量. 某个单独页面需要的js,最好放在HTML文档的最后,</body>之前,这样能使浏览器更快地加载页面. ...

  5. pt

    https://www.hdarea.co/torrents.php http://hdhome.org/torrents.php https://ourbits.club/torrents.php ...

  6. （1）React的开发

    1.React项目架构搭建 2.JSX语法 3.React组件化开发 4.React组件间通信 5.React中的事件 6.React代码优化 7.React中组件的样式修饰 React简介及基础语法 ...

  7. C#题(子文章)(持续更新)

    -----> 总文章 入口 文章目录 [-----> 总文章 入口](https://blog.csdn.net/qq_37214567/article/details/90174445) ...

  8. 找到树中指定id的所有父节点

    const data = [{ id: 1, children: [{ id: 2, children: [{ id: 3, }, { id: 4, }], }], }, { id: 5, child ...

  9. mysql 开放端口 外网访问

    mysql 开放端口 外网访问 作者: moyixi 时间: April 24, 2018 分类: 默认分类,数据库,mysql 前提: 如果是云服务器,请先把安全组件相应的开发 查看服务器的端口33 ...

  10. linux安装phantomjs，-bash: /usr/local/bin/phantomjs: is a directory解决方案

    首先安装依赖——fontconfig和freetypeyum install fontconfig freetype2在官网上下载对应版本的包http://phantomjs.org/download ...