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. C#电脑自动关机代码指令

    Process p = new Process();//实例化一个独立进程                p.StartInfo.FileName = "cmd.exe";//进程 ...

  2. webstorm卡、闪退以及win10中jdk配置【转】

    原文地址:webstorm卡.闪退以及win10中jdk配置   今天 webstorm 突然一直处于 indexing 索引状态,然后就卡死,重装也无法解决. 搜了一下后,有人说使用 64 位客户端 ...

  3. jQuery选择器解释和说明

    jQuery选择器的意义在于快速的找出特定的DOM元素,然后添加相应的行为. 基本选择器 //选择 id为 one 的元素 $('#btn1').click(function(){ $('#one') ...

  4. .net求两个数的最大公约数和最小公倍数

    最大公约数:指两个或多个整数共有约束中最大的一个. 最小公倍数:如果有一个自然数a能被自然数b整除,则称a为b的倍数,b为a的约数,对于两个整数来说,指该两数共有倍数中最小的一个. /// <s ...

  5. iOS 9 之后更改状态栏字体颜色

    设置statusBar的[前景部分] 简单来说,就是设置显示电池电量.时间.网络部分标示的颜色, 这里只能设置两种颜色: 默认的黑色(UIStatusBarStyleDefault) 白色(UISta ...

  6. java SimpleDateFormat非线程安全测试

    public class MyThread extends Thread { private SimpleDateFormat sdf; private String dateString; publ ...

  7. XPOSED-LUA

    转载说明 本篇文章可能已经更新,最新文章请转:http://www.sollyu.com/xposed-lua/ 说明 Xposed Lua Module 是一个Xposed的模块,他有下面的优点 本 ...

  8. CSS3单位

    em 做前端的应该对em不陌生,不是什么罕见的单位,是相对单位,参考物是父元素的font-size,具有继承的特点.如果字体大小是16px(浏览器的默认值),那么 1em = 16px. 不过,这样使 ...

  9. JasperReport原理解析之（一）

    1. [加载原始文件]有iReport生成jrxml文件后,由jasperreport包中的类JRXml文件 加载和解析 jrxml文件. 文件解析后生成  JasperDesign对象. Jaspe ...

  10. foreach的原理

    1.foreach 语句对实现 System.Collections .IEnumerable 或 System.Collections.Generic .IEnumerable <T > ...