网页背景居中的方法有很多种的。这里介绍一些用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. 获取html上元素的真正坐标

    使用HTML元素的style.left,style.top,style.width,style.height以及width,height属性,都不能获得元素的真正位置与大小,这些属性取出来的都是原来的 ...

  2. poj 3259 Wormholes(最短路 Bellman)

    题目:http://poj.org/problem?id=3259 题意:一个famer有一些农场,这些农场里面有一些田地,田地里面有一些虫洞,田地和田地之间有路,虫洞有这样的性质: 时间倒流.问你这 ...

  3. Missing artifact com.sun:tools:jar:1.5.0的解决方案

    今天在用maven的时候遇到一个问题pom.xml提示Missing artifact com.sun:tools:jar:1.5.0 试过改eclipse的eclipse.ini文件,也试过在ecl ...

  4. poj3281

    非常非常经典的构图 有二分图学习基础的话,很容易想到这是一个“三分图”的匹配问题 我们将牛,food,drink作为点 为了方便,我们将牛放在中间,每头牛的出边指向drink种类,入边由food指入 ...

  5. bzoj1385: [Baltic2000]Division expression

    欧几里得算法.可以发现规律,a[2]作为分母,其他作为分子,必定是最好的选择.判断是否为整数即可. #include<cstdio> #include<cstring> #in ...

  6. SQL SERVER 2000 & SQL SERVER 2005 数据缓存依赖

    一.SQL SERVER 7.0/2000和SQL SERVER 2005的简介及比较 1.1     SQL SERVER 7.0/2000 SQL SERVER 7.0/2000没有提供内置的支持 ...

  7. 【转】JAVA中的反射机制

    反射,当时经常听他们说,自己也看过一些资料,也可能在设计模式中使用过,但是感觉对它没有一个较深入的了解,这次重新学习了一下,感觉还行吧! 一,先看一下反射的概念: 主要是指程序可以访问,检测和修改它本 ...

  8. 安装VS2015出现的bug,各位安装请注意

    昨天微软发布了vs2015 迫不及待的下载下来安装体验了一把,但是机器上同时安装有vs2010.vs2012.vs2013 .安装完成后,因为公司项目需要开发,打开vs2012 ,有如下提示: 百度查 ...

  9. CSS中的块级元素与行级元素

    最近初学CSS时对块级元素与行级元素有时会产生混淆,写篇博客记录一下自己对其的理解. 先从概念上来看: 块级元素 特点:1.每个块级元素都是独自占一行,其后的元素也只能另起一行,并不能两个元素共用一行 ...

  10. mkimage的-a 和 –c参数和内核引导

    目录 一.mkimage工具简介二.-a参数与-e参数和内核引导的关系三.实例测试 3.1 -a参数与-e参数相同,可以将内核下载到SDRAM的任何地址,然后从这启动 3.2 -a参数与-e参数不同, ...