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. 关于在Eclipse中构建patch开发环境

    git仓库中不能添加空文件夹. 至于为什么git 仓库中不能添加空文件夹,我没有找到具体的原因. 在V2EX上有人说: 我猜是因为git的内部实现,即只对文件做快照决定的吧,另一方面空文件夹确实对源代 ...

  2. C# 委托的几种写法

    class Program    {         delegate string Get(string ss);        delegate string Get2(int i);       ...

  3. struts2-ajax-jQuery

    1.所需jar包如下所示.其中选中的四个包是struts2实现ajax所必需的,所有的jar包都可以从下载的完整的struts2 包中的lib文件夹中找到. 2.Demo struts2ajax.js ...

  4. Android之布局

    Android中的布局分为六种,分别是相对布局.线性布局.表格布局.网格布局.帧布局.绝对布局,良好的布局设计对UI界面至关重要,下面先来看看先相对布局. 相对布局(RelativeLayout): ...

  5. select into 、 insert into select 、create table as select复制表

    Insert是T-sql中常用语句,Insert INTO table(field1,field2,...)  values(value1,value2,...)这种形式的在应用程序开发中必不可少.但 ...

  6. Office升级到2013版后无法登录微软账号问题

    自打office从2010版升级到2013版,就再也无法登录微软账号了.每次点击登录,弹出来的框就显示:this feature has been disabled by your administr ...

  7. Access数据库一种树形结构的实现和子节点查询

    BOOL CManageDataBase::GetDepTreeAllSons( int rootItem ) { CADORecordset Rst(&m_DataBase); BOOL b ...

  8. 谈谈Nullable<T>的类型转换问题

    本篇文章讨论可空值类型(Nullable<T>)的转换,却确地说是如何将一种类型的值对象转换成相应的可空值.这来源于今天我们的一个成员遇到的一个小问题,我经过一些整理写了这篇文章.虽然没有 ...

  9. web项目嵌入Jetty运行的两种方式(Jetty插件和自制Jetty服务器)

    在开发Java web项目时候,可以在项目中嵌入Jetty服务的方式来运行web程序. 由于最近开发web项目,自己使用的是比较旧的eclipse不支持导入tomcat来运行项目,于是就学习了下使用项 ...

  10. HTML5 Video(视频)

    HTML5 Video(视频) 很多站点都会使用到视频. HTML5 提供了展示视频的标准. 检测您的浏览器是否支持 HTML5 视频: 检测 Web站点上的视频 直到现在,仍然不存在一项旨在网页上显 ...