CSS

 body.loginpage {

        background-image: url(../images/background-image.jpg);

        background-size:cover;

    }

HTML

<body class="loginpage">

    <div class="loginpanel">

        <div class="loginpanelinner">

            <div class="logo animate0 bounceIn">

                <img src="UI/main.shamcey/images/logo.png" alt="" />

            </div>

            <div class="inputwrapper login-alert">

                <div class="alert alert-error">Invalid username or password</div>

            </div>

            <div class="inputwrapper animate1 bounceIn">

                <input type="text" name="username" id="username" placeholder="Enter any username" />

            </div>

            <div class="inputwrapper animate2 bounceIn">

                <input type="password" name="password" id="password" placeholder="Enter any password" />

            </div>

            <div class="inputwrapper animate3 bounceIn">

                <button id="submit" name="submit">Sign In</button>

            </div>

            <div class="inputwrapper animate4 bounceIn">

                <label>

                    <input type="checkbox" class="remember" name="signin" />

                    Keep me sign in

                </label>

            </div>

        </div>

    </div>

    <div class="loginfooter">

        <p>&copy; 2013. Shamcey Admin Template. All Rights Reserved.</p>

    </div>

</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. Webservice简单概念

    一.序言 大家或多或少都听过 WebService(Web服务),有一段时间很多计算机期刊.书籍和网站都大肆的提及和宣传WebService技术,其中不乏很多吹嘘和做广告的成 分.但是不得不承认的是W ...

  2. poj 1364 差分约束

    思路:设dis[i]为从0点到第i点的序列总和.那么对于A B gt  k 来讲意思是dis[B+A]-dis[A]>k; 对于A B lt k来讲就是dis[B+A]-dis[A]<k; ...

  3. 屏蔽cBox广告的方法 无需安装软件

    在hosts文件中加入两句代码: 127.0.0.1 games.cntv.cn 127.0.0.1 d.cntv.cn

  4. 让CentOS能用yum自动安装rar和unrar

    目的:让CentOS能用yum自动安装rar和unrar 系统环境: CentOS 7.0 具体操作步骤如下: 1.编辑文件 编辑dag.repo文件,或者说是新建一个dag.repo文件. vi / ...

  5. ActiveMQ(5.10.0) - JNDI Support

    1. Place the jndi.properties file on the classpath. java.naming.factory.initial = org.apache.activem ...

  6. ViewPager的基本使用--可左右循环切换也可自动切换

    ViewPager也算是Android自带的常用控件之一,但是有可能会无法直接调用,所以只需要将工程目录里/libs/android-support-v4.jar该jarAdd to Build Pa ...

  7. Ibatis.net防Sql注入

    sql注入是一个古老的话题了,但经常会被我们忽略.尤其是使用了ibatis.net之后. Ibatis.net框架对sql注入问题已经做了很好的防护,但经常由于开发人员使用不当,会造成sql的注入隐患 ...

  8. iOS开发——iOS10升级极光推送SDK、友盟分享SDK

    前不久升级了Xcode8 ,同时iOS10系统也推送久. 由于公司需要适配iOS 10系统,同时第三方sdk建议升级. 包含替换升级新的SDK和相应的代码修改. 主要分享如何升级极光推送SDK,友盟分 ...

  9. OC2_点语法(属性关键字)

    // // Dog.h // OC2_点语法(属性关键字) // // Created by zhangxueming on 15/6/16. // Copyright (c) 2015年 zhang ...

  10. opencv 手写选择题阅卷 (四)Android端 手机应用开发

    opencv 手写选择题阅卷 (四)Android 手机应用开发 在PC端把代码调通以后开始开发Android 手机应用,因为主要功能代码为C++代码,所以需要通过NDK编译,JAVA通过JNI方式调 ...