由于<body>标签的图片不能够拉伸，

解决办法：

1、图片不够大，又background属性不能拉伸图片；

2、只能用个div，把其z-index值设为负，并使这个div大小为整个body大小，在div里用<img> 3、body的background属性去掉，要不然会被遮住

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>hello world</title>

</head>

<body>

<div id="Layer1" style="position:absolute; width:100%; height:100%; z-index:-1">

<img src="pictures/background.jpg" height="100%" width="100%"/>

</div>

</body>

</html>

css -- 背景图片自适应屏幕大小的更多相关文章

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

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

  2. html/css背景图片自适应分辨率大小

    <style type='text/css'> .bgbox { position: absolute; left: 0; top: 0; width: 100%; overflow: h ...

  3. css 背景图片自适应分辨率大小 兼容

    拉伸,all浏览器兼容.bg{     background:url(http://wyz.67ge.com/wp-content/uploads/qzlogo.jpg);     filter:&q ...

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

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

  5. html 网页背景图片根据屏幕大小CSS自动缩放

    https://blog.csdn.net/coslay/article/details/47109281 腾讯微博和QQ空间的登录背景图片是根据访客的屏幕大小自动缩放的,但是好像是用JQuery代码 ...

  6. picturefill + picture 标签 实现兼容性很棒的 响应式图片 自适应 屏幕大小

    polyfill 它是一个能够补齐浏览器兼容性问题的一个东西,使用到的<picture></picture>标签 ,并不是所有浏览器都支持,为了实现更好的兼容效果,这里就使用到 ...

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

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

  8. HTML中使背景图片自适应浏览器大小

    由于<body>标签的图片不能够拉伸, 解决办法: 1.图片不够大,又background属性不能拉伸图片: 2.只能用个div,把其z-index值设为负,并使这个div大小为整个bod ...

  9. css 背景图片自适应

    body{ height:100%; overflow:hidden;} .bg { background-image: url(../../img/beijing.jpg); width:100%; ...

随机推荐

  1. 简单易懂的laravel事件，这个功能非常的有用(监听事件,订阅者模式)

    先说一下在什么场景会使用这个事件功能. 事情大概是这样的,需求要在用户注册的时候发一些帮助邮件给用户(原本用户在注册之后已经有发别的邮件的了,短信,IM什么的) 原来这个注册的方法也就10多行代码.但 ...

  2. unity, 查看内置shader源码

    1,建一个球体. 2,建一个材质,将材质拖到球体上. 3,在材质的shader下拉列表中选择想查看的内置shader,点材质栏右上设置按钮->Select Shader 进入shader面板. ...

  3. 国际化模块 angular-translate 简单方便快捷翻译中英文等多语言环境

    很多web服务面对的不仅仅是当地用户,多语言环境不仅能提升逼格,更重要是一种用户体验. angular.js 作为前后端拆分的解决方案之一,当然离不开前端框架处理国际化的问题,angular.js 官 ...

  4. Windows Azure Mobiles Services实现client的登录注冊

    下文仅仅是简单实现,client以Android端的实现为例: 用户表Account: package com.microsoft.ecodrive.model; public class Accou ...

  5. [na]mail收发过程

    以前老记不住这smtp和pop3谁收谁发. 简单邮件传输协议(SMTP),用来发送或中转发出的电子邮件,       占用tcp 25端口. 第三版邮局协议(POP3),用于将服务器上把邮件存储到本地 ...

  6. 解决方式-在Mac系统中，Eclipse无法导入含有中文路径的project

    1.改动eclipse.app/Contents/Info.plist.查找 <key>CFBundleExecutable<key> 在其上方加入下面代码 <? xml ...

  7. ubuntu文件夹默认列表显示

    编辑-->首选项-->视图-->列表视图

  8. Hadoop集群datanode死掉或者secondarynamenode进程消失处理办法

    当Hadoop集群的某单个节点出现问题时,一般不必重启整个系统,只须重启这个节点,它会自动连入整个集群. 在坏死的节点上输入如下命令即可: hadoop-daemon.sh start datanod ...

  9. Qt学习之路3---Qt中的坐标系统

    -Qt使用统一的坐标系统定位窗口部件和位置大小 -Qt部件类提供成员函数在坐标系统中进行定位 -QWidget类提供了窗口部件所需的坐标系统成员函数 代码测试 #include "widge ...

  10. win7下wifi密码的保存路径

    win7下wifi保存在C:\ProgramData\Microsoft\Wlansvc\Profiles\Interfaces目录下的配置文件中,xml配置文件 <?xml version=& ...