设置全屏的背景图片

我们有时期望背景图片自动拉伸占据所有空间,使用CSS 3做起来并不麻烦,定义如下的CSS:

body {
    background:#3d71b8 url(../back_main.png);
    background-size: 100%;
    background-position:center;
}

但是background-siz是CSS 3的属性,并不是所有的浏览器都支持。使用CSS 2的一种实现如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Welcome to my blog</title>
    <style type="text/css">
    #bg {
        position:fixed;
        top:0;
        left:0;
        width:100%;
        height:100%;
    }

#bg img {
        position:absolute;
        left:0;
        right:0;
        bottom:0;
        margin:auto;
        width:100%;
        height:100%;
        z-index:-1;
    }
    </style>
</head>
<body>
    <div id="bg">
        <img src="back_main.png" >
    </div>
    <div>
    Your content goes here!
    </div>
</body>
</html>

时间: 2024-11-10 01:13:32

设置全屏的背景图片的相关文章

iOS全屏的背景,多个按钮位置适配(swift)

最近写博客比较多,其实大多是之前的随笔,这一段整理一下,发布出来. 今天这篇文章,说一下,面对全屏的背景图片,要在固定的位置放置多个按钮的问题我的解决办法,其实很土,谈不上是技术,就是一种方法,很省力. 图片就是这样的.再重复一下问题:例如我要在上述全屏的背景上的 M U R P 和 访问官方网站五个地方放置五个按钮,要求适配各种型号手机. 我是这样解决的(StoryBoard): 首先:在storyBoard里面拖4个ViewController,分别设置screen size 为3.5. 4

【Android游戏开发之一】:设置全屏以及简单的图形绘制

注:本文改写自李华明的博客,原文地址:http://blog.csdn.net/xiaominghimi/article/details/6089317 一.设置全屏: 两种方法,第一种在activity中: package com.howlaa.androidgame1; import android.os.Bundle; import android.view.Window; import android.view.WindowManager; import android.app.Acti

Android中设置全屏的方法

在实际的应用程序开发中,我们有时需要把 Activity 设置成全屏显示,一般情况下,可以通过两种方式来设置全屏显示效果.其一,通过在代码中可以设置,其二,通过manifest配置文件来设置全屏. 其一:在代码中设置(如下) public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); //设置无标题 requestWindowFeature(Window.FEATURE_NO_TITL

关于火狐游览器设置全屏状态不显示工具栏以及其他游览器全屏问题

无论是IE,火狐,还是谷歌游览器.按F11可以实现全屏状态显示,再次按F11可以回到原先的网页显示状态. 清楚游览器缓存快捷键:ctrl+shift+delete 实现火狐游览器在全屏状态显示工具栏的方法: 第一步打开火狐游览器:输入about:config如下图: 单击"我保证小心"打开如下网页并找到browser.fullscreen.autohide将此后面的"值"修改为"false"即可在全屏状态下显示工具栏.如下图所示: 之后将游览器关

Android(java)学习笔记242:多媒体之设置全屏的方法

在实际的应用程序开发中,我们有时需要把 Activity 设置成全屏显示,一般情况下,可以通过两种方式来设置全屏显示效果.其一,通过在代码中可以设置,其二,通过manifest配置文件来设置全屏. 其一:在代码中设置(如下): 1 public void onCreate(Bundle savedInstanceState) { 2 super.onCreate(savedInstanceState); 3 4 //设置无标题 5 requestWindowFeature(Window.FEAT

淘宝店如何加入全屏轮播图片

淘宝店如何加入全屏轮播图片? | 浏览:5779 | 更新:2014-06-11 11:31 | 标签: 淘宝 1 2 3 4 5 分步阅读 百度经验:jingyan.baidu.com 开淘宝店的朋友,看到很多店铺有各式各样的轮播大图,很高端大气,您是否也想拥有一款属于自己的轮播图呢?今天我就交给大家如何制作全屏轮播图. 百度经验:jingyan.baidu.com 工具/原料 电脑/网络 百度经验:jingyan.baidu.com 方法/步骤 1 登录淘宝店. 登录到您的淘宝店,点击“卖家

设置全屏的方法

设置全屏的3种方式: 1.自定义主题 2.系统自带主题 3.编码实现 requestWindowfeature(window.FEATURE_NO_TITLE); getWindow().setFlags(WindowManager.LayoutParams.FLAG.FULLSCREAM,WindowManager.LayoutParams.FLAG_FULLSCREEN);

【Android】设置全屏和横屏

[设置全屏] 在setLayout之前使用如下代码 1 requestWindowFeature(Window.FEATURE_NO_TITLE);//隐藏标题 2 getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, 3 WindowManager.LayoutParams.FLAG_FULLSCREEN);//设置全屏 [强制横屏] 在layout中添加 1 android:launchMode="singleTas

Android之隐藏状态栏、设置全屏、取消全屏

我将这三个设置代码写在一个工具类当中,当你要对某个Activity调用这三个功能的时候,把Activity本身作为参数传递进去即可. 代码如下: import android.app.Activity; import android.view.Window; import android.view.WindowManager; public class CommonUtil { /** * 设置隐藏标题栏 * * @param activity */ public static void set