HTML 背景图片自适应
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>© 2013. Shamcey Admin Template. All Rights Reserved.</p>
</div> </body>
HTML 背景图片自适应的更多相关文章
- 【Python全栈-CSS】CSS实现网页背景图片自适应全屏
CSS实现网页背景图片自适应全屏 功能:实现能自适应屏幕大小又不会变形的背景大图,而且背景图片不会随着滚动条滚动而滚动. 以下是用CSS实现的方法: <html> <head> ...
- 基于html5背景图片自适应代码
基于html5背景图片自适应代码是一款背景不随滚动条滚动,会根据分辨率不同自动匹配对应的背景图片.效果图如下: 在线预览 源码下载 实现的代码. css代码: .jawbone-hero .jaw ...
- bootstrop设置背景图片自适应屏幕
如果不用bootstrop框架,想让背景图片自适应窗口大小,可以这样做: <style type="text/css"> html{height: %;} body.a ...
- CSS实现网页背景图片自适应全屏
一张清晰漂亮的背景图片能给网页加分不少,设计师也经常会给页面的背景使用大图,我们既不想图片因为不同分辨率图片变形,也不希望当在大屏的情况下,背景有一块露白,简而言之,就是实现能自适应屏幕大小又不会变形 ...
- css设置背景图片自适应
CreateTime--2017年12月25日16:36:07 Author:Marydon 控制背景图片100%自适应填充布局 /* 控制背景图片100%自适应填充布局 */ body{ bac ...
- CSS实现网页背景图片自适应全屏,自适应背景图片
一张清晰漂亮的背景图片能给网页加分不少,设计师也经常会给页面的背景使用大图,我们既不想图片因为不同分辨率图片变形,也不希望当在大屏的情况下,背景有一块露白,简而言之,就是实现能自适应屏幕大小又不会变形 ...
- css 背景图片自适应元素大小
一.一种比较土的方法,<img>置于底层. 方法如下: CSS代码: HTML: <img src="背景图片路径" /> <span>字在背景 ...
- 背景图片自适应整个页面CSS+DIV
<body style="overflow:hidden;"> <div class="wrapper"> <!--背景图片--& ...
- div背景图片自适应
对背景图片设置属性:background-size:cover;可以实现背景图片适应div的大小. background-size有3个属性: auto:当使用该属性的时候,背景图片将保持100% 的 ...
- H5 背景图片自适应屏幕问题解决办法
今天也是偶然遇到这个问题的,平成很少用到关于css的内容,就在网上找了很多个方法,最后总结以下几种很实用的方法 方法1: <style> body{ background:url(beij ...
随机推荐
- Eclipse NDK 配置,无需安装Cygwin
Eclipse NDK 配置,不用安装Cygwin 文章转自http://www.cnblogs.com/chenjiajin/archive/2012/04/12/2444188.html 一.关于 ...
- 如何评价微信小程序?
这次我不站张小龙,虽然他说的「用完即走」的道理在,但我并不认为小程序会形成生态. (一) 仅仅从抽象场景上来讲,小程序当然很美好. 对开发者来说,不用费尽心思开发好多平台的 APP 了,不用考虑适配各 ...
- asp.net mvc 的几种分页Pager
第一种 /// <summary> /// 分页Pager显示 /// </summary> /// <param name="html">&l ...
- Linux 命令 - head: 打印文件的开头部分
命令格式 head [OPTION]... [FILE]... 命令参数 -c, --bytes=[-]K 显示每个文件的前 K 字节内容. -n, --lines=[-]K 显示每个文件的前 K 行 ...
- C#算法基础之希尔排序
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...
- C#算法基础之冒泡排序
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...
- Activity Launch Mode
launcherMode Activity如何被启动呢?Intent对象中与Activity启动相关的标志(FLAG_ACTIVITY_*)有四个.它们分别是: "standard" ...
- contentMode各种样式展示
我们用图片来展示下contentMode的各种样式. 原图size为1155 * 715imageView的size为335 * 607 一.UIViewContentModeScaleToFill ...
- c# DateTime时间格式和JAVA时间戳格式相互转换
/// java时间戳格式时间戳转为C#格式时间 public static DateTime GetTime(long timeStamp) { DateTime dtStart = TimeZon ...
- OpenGL2-绘制三角形
代码下载 /*** 该例子展示如何使用OpenGL绘制三角形* 为什么说绘制三角形呢 ?三维空间里面,我们看到的机会大多数* 漂亮的模型,建筑,任务,机会都是有三角形网络组成.可以说三角形* 是组成三 ...