CSS

  1.  body.loginpage {
  2.         background-image: url(../images/background-image.jpg);
  3.         background-size:cover;
  4.     }

HTML

  1. <body class="loginpage">
  2.  
  3.     <div class="loginpanel">
  4.         <div class="loginpanelinner">
  5.             <div class="logo animate0 bounceIn">
  6.                 <img src="UI/main.shamcey/images/logo.png" alt="" />
  7.             </div>
  8.             <div class="inputwrapper login-alert">
  9.                 <div class="alert alert-error">Invalid username or password</div>
  10.             </div>
  11.             <div class="inputwrapper animate1 bounceIn">
  12.                 <input type="text" name="username" id="username" placeholder="Enter any username" />
  13.             </div>
  14.             <div class="inputwrapper animate2 bounceIn">
  15.                 <input type="password" name="password" id="password" placeholder="Enter any password" />
  16.             </div>
  17.             <div class="inputwrapper animate3 bounceIn">
  18.                 <button id="submit" name="submit">Sign In</button>
  19.             </div>
  20.             <div class="inputwrapper animate4 bounceIn">
  21.                 <label>
  22.                     <input type="checkbox" class="remember" name="signin" />
  23.                     Keep me sign in
  24.                 </label>
  25.             </div>
  26.         </div>
  27.     </div>
  28.  
  29.     <div class="loginfooter">
  30.         <p>&copy; 2013. Shamcey Admin Template. All Rights Reserved.</p>
  31.     </div>
  32.  
  33. </body>

HTML 背景图片自适应的更多相关文章

  1. 【Python全栈-CSS】CSS实现网页背景图片自适应全屏

    CSS实现网页背景图片自适应全屏 功能:实现能自适应屏幕大小又不会变形的背景大图,而且背景图片不会随着滚动条滚动而滚动. 以下是用CSS实现的方法: <html> <head> ...

  2. 基于html5背景图片自适应代码

    基于html5背景图片自适应代码是一款背景不随滚动条滚动,会根据分辨率不同自动匹配对应的背景图片.效果图如下: 在线预览   源码下载 实现的代码. css代码: .jawbone-hero .jaw ...

  3. bootstrop设置背景图片自适应屏幕

    如果不用bootstrop框架,想让背景图片自适应窗口大小,可以这样做: <style type="text/css"> html{height: %;} body.a ...

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

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

  5. css设置背景图片自适应

      CreateTime--2017年12月25日16:36:07 Author:Marydon 控制背景图片100%自适应填充布局 /* 控制背景图片100%自适应填充布局 */ body{ bac ...

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

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

  7. css 背景图片自适应元素大小

    一.一种比较土的方法,<img>置于底层. 方法如下: CSS代码: HTML: <img src="背景图片路径" /> <span>字在背景 ...

  8. 背景图片自适应整个页面CSS+DIV

    <body style="overflow:hidden;"> <div class="wrapper"> <!--背景图片--& ...

  9. div背景图片自适应

    对背景图片设置属性:background-size:cover;可以实现背景图片适应div的大小. background-size有3个属性: auto:当使用该属性的时候,背景图片将保持100% 的 ...

  10. H5 背景图片自适应屏幕问题解决办法

    今天也是偶然遇到这个问题的,平成很少用到关于css的内容,就在网上找了很多个方法,最后总结以下几种很实用的方法 方法1: <style> body{ background:url(beij ...

随机推荐

  1. [转]利用vertical-align:middle实现在整个页面居中

    本文转自:http://www.cnblogs.com/xueming/archive/2012/03/21/VerticalAlign.html 如果想让一个div或一张图片相对于整个页面居中,用v ...

  2. js 重庆38区县 数组

    data:[ {name: '九龙坡区', value: 20057}, {name: '渝北区', value: 27}, {name: '渝中区', value: 27}, {name: '万州区 ...

  3. Java Concurrency - Phaser, Controlling phase change in concurrent phased tasks

    The Phaser class provides a method that is executed each time the phaser changes the phase. It's the ...

  4. Jersey(1.19.1) - Rules of Injection

    Previous sections have presented examples of annotated types, mostly annotated method parameters but ...

  5. java源码研究--List中的set和add方法区别

    在处理一道题目是,发现他们使用了List 中的set 方法,这个方法我平时很少用到,今天来研究一下,set和add的区别 add(int index,Object obj)方法与set(int ind ...

  6. centos6.5下逻辑卷操作

    1.将两块独立磁盘分别分区 2.创建物理卷-pvcreate 3.创建卷组 4.创建逻辑卷 5.格式化逻辑卷 6.扩展逻辑卷 7.缩小逻辑卷

  7. MySQL免安装版配置

    mysql版本:mysql-5.5.33-win32 1.解压免安装包到指定目录MYSQL_HOME2.cmd进入MYSQL_HOME\bin 注册mysql服务:mysqld --install M ...

  8. 关于JAVA System常见类的一些总结

    一.JAVA System类概述 1.概述: System 类是一个抽象类,所有的字段和方法都是静态的,即不能被实例化.其中包含一些有用的类字段和方法,它不能被实例化.在 System 类提供的设施中 ...

  9. 让.NET程序会说话

    在开发过程中需要用到让程序自动播放语音,如果是一个一个录则太麻烦了,在开发过程中发现.NET已经自带了该功能 Type type = Type.GetTypeFromProgID("SAPI ...

  10. DayDream, 移动VR 2.0里程碑: 概述（上篇）

    VR设备, 断断续续使用了很多个; 尤其是最近半年,主要是PC VR方面项目. 以前对移动VR不感冒,这几天试用了一下DayDream, 眼前突然一亮, 就如同年初首次使用HTC Vive眼前一亮的感 ...