网页背景居中的方法有很多种的。这里介绍一些用CSS让背景图片居中的方法。

让背景图片居中的第一个方法是用像素设定,很多都用这种,但是也是最麻烦的:
<div style="width:800px;height:600px;background:url(../images/logo.jpg) no-repeat 250px 270px;border:1px solid #cccccc;"></div> 第二种居中方法:用50%设定,很方便:
<div style="width:800px;height:600px;background:url(../images/logo.jpg) no-repeat 50% 50%;border:1px solid #cccccc;"></div> 第三种:用center设定(第2个center可以省略)
<STYLE TYPE="text/css">
<!--
BODY {background-image: URL(../images/logo.jpg);
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;}
-->
</STYLE>

用CSS让网页背景图片居中的方法的更多相关文章

  1. 【Python全栈-CSS】CSS实现网页背景图片自适应全屏

    CSS实现网页背景图片自适应全屏 功能:实现能自适应屏幕大小又不会变形的背景大图,而且背景图片不会随着滚动条滚动而滚动. 以下是用CSS实现的方法: <html> <head> ...

  2. CSS实现网页背景图片自适应全屏

    一张清晰漂亮的背景图片能给网页加分不少,设计师也经常会给页面的背景使用大图,我们既不想图片因为不同分辨率图片变形,也不希望当在大屏的情况下,背景有一块露白,简而言之,就是实现能自适应屏幕大小又不会变形 ...

  3. CSS实现网页背景图片自适应全屏,自适应背景图片

    一张清晰漂亮的背景图片能给网页加分不少,设计师也经常会给页面的背景使用大图,我们既不想图片因为不同分辨率图片变形,也不希望当在大屏的情况下,背景有一块露白,简而言之,就是实现能自适应屏幕大小又不会变形 ...

  4. CSS中让背景图片居中且不平铺

    background:url(../images/logo.jpg) no-repeat center ;

  5. css如何使背景图片水平居中

    CSS中定位背景图片的属性是:background-position,用法background-position 属性设置背景图像的起始位置. 你要水平居中可以: div{background-pos ...

  6. IE/Chrome背景图片居中1px偏移解决方法

    最近在支持行业运营的一个推广页面,遇到了非常规的页面banner图居中的问题,为了解决此问题,做了简单的测试,做了一个小结,为经常做大促页面的兄弟姐妹们提供参考解决方案. 首先来看看现象.最经典的页面 ...

  7. css代码添加背景图片常用代码

    css代码添加背景图片常用代码 1 背景颜色 { font-size: 16px; content: ""; display: block; width: 700px; heigh ...

  8. 用extract-text-webpack-plugin提取出来的css文件中背景图片url的不正确的问题

    在一个main.js中require一个scss文件,scss文件中用了背景图片,图片url是用的相对路径,用extract-text-webpack-plugin插件提取出的css文件背景图片路径不 ...

  9. !!!css如何让img图片居中?css的display属性实现图片居中(代码实例)

    在我们开发前端页面的时候,为了让页面效果美观,会让图片呈现居中效果.那么css怎么让img图片居中显示呢?本篇文章给大家带来css如何让img图片居中?css的display属性实现图片居中(代码实例 ...

随机推荐

  1. 8 Things Every Person Should Do Before 8 A.M.

    https://medium.com/@benjaminhardy/8-things-every-person-should-do-before-8-a-m-cc0233e15c8d 1. Get A ...

  2. Compass被墙后如何安装安装

    今天安装 Compass 多时候发现竟然安装不了,且什么提示也没有,让人纳闷.安装代码如下: $ gem install compass 运行该段代码后发现没反应,也没有提示,后来网上查了才知道,竟然 ...

  3. poj 3278 Catch That Cow (bfs)

    题目:http://poj.org/problem?id=3278 题意: 给定两个整数n和k 通过 n+1或n-1 或n*2 这3种操作,使得n==k 输出最少的操作次数 #include<s ...

  4. NLog 传递参数

    用NLog记文件日志,一般都用{$basedir}变量,把日志记在运行的目录或者它的子目录下,遇到要写在其他目录的下,看了下Nlog找到用环境变量传参数. .net 里写 Environment.Se ...

  5. mysql中增加某一时间段内的时间数据(包含:时间、年、月、日、第几周、季度)

    创建表dim_date: create table `dim_date` ( `year` int (20), `month` int (20), `day` int (20), `week` int ...

  6. Android 主题动态切换框架:Prism

    Prism(棱镜) 是一个全新的 Android 动态主题切换框架,虽然是头一次发布,但它所具备的基础功能已经足够强大了!本文介绍了 Prism 的各种用法,希望对你会有所帮助,你也可以对它进行扩展, ...

  7. SharePoint 2010 使用自定义aspx页面替换列表默认的新建(NewForm.aspx),查看(DispForm.aspx)和编辑(EditForm.aspx)页面

    转:http://www.cnblogs.com/sygwin/archive/2011/11/04/2236678.html 如何使用自定义的aspx页(比如Application Page)替换列 ...

  8. (转载)static全局变量与普通的全局变量有什么区别?

    (转载)http://www.cnblogs.com/StudyRush/archive/2010/09/25/1834922.html 全局变量(外部变量)的说明之前再冠以static 就构成了静态 ...

  9. [Everyday Mathematics]20150102

    设 \[ a_1=3,\quad a_{n+1}=\dfrac{1}{2}(a_n^2+1)\quad(n=1,2,\cdots). \] 试求 \[ \vsm{n}\dfrac{1}{1+a_n}. ...

  10. Loader for loading embedded assemblies z

    using System; using System.Collections.Generic; using System.IO; using System.Linq; using System.Ref ...