想做一个个人展示类的网站首页,用整张图片来当背景,浏览器窗口放大缩小时背景图片不会变形,需要用到分层来实现其他功能,就用DIV来实现了

#bodycontainer {
width:100%;
height:100%;
min-width:973px;
min-heigth:584px;
background-image:url("love.jpg");
background-repeat:no-repeat;
background-size:cover;
}

重点在于background-size这一块,开始是用background-size:100% auto;这样解决了宽度问题,高度不OK,发现background-size:cover;可以实现我想要的。

但这个是CSS3的标准,也就是说新版本的浏览器可以实现,但不能包含所有,需要每个人根据需要再调整……

CSS网页背景图片等比例占满整个页面的解决方案的更多相关文章

  1. 【CSS】css网页背景图片设置

    刚学CSS,了解了下网页背景图设置,顺便记录下. 下面主要是实现背景图位置保持不变,即不随滚动条动而动的功能. body { background-image:url(images/bck.png); ...

  2. css背景图片拉伸 以及100% 满屏显示

    如何用css背景图片拉伸 以及100% 满屏显示呢?这个问题听起来似乎很简单.但是很遗憾的告诉大家.不是我们想的那么简单. 比如一个容器(body,div,span)中设定一个背景.这个背景的长宽值在 ...

  3. 用CSS让网页背景图片居中的方法

    网页背景居中的方法有很多种的.这里介绍一些用CSS让背景图片居中的方法. 让背景图片居中的第一个方法是用像素设定,很多都用这种,但是也是最麻烦的: <div style="width: ...

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

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

  5. CSS让DIV按照背景图片的比例缩放,并让背景图片填充整个元素(转)

    目的是:通过background的一系列属性,让DIV按照背景图片的比例缩放,并让背景图片填充整个DIV 首先我们需要让背景图片在指定的DIV中全部填充显示 之前看有用类似 background-at ...

  6. CSS中背景图片定位方法

    转自:http://www.ruanyifeng.com/blog/2008/05/css_background_image_positioning.html 作者: 阮一峰 日期: 2008年5月 ...

  7. (转)HTML&CSS——background: url() no-repeat 0 -64px;CSS中背景图片定位方法

    http://blog.csdn.net/oscar92420aaa/article/details/51304067 CSS中背景图片的定位,困扰我很久了.今天总算搞懂了,一定要记下来. 在CSS中 ...

  8. HTML&CSS——background: url() no-repeat 0 -64px;CSS中背景图片定位方法

    CSS中背景图片的定位,困扰我很久了.今天总算搞懂了,一定要记下来. 在CSS中,背景图片的定位方法有3种: 1)关键字:background-position: top left; 2)像素:bac ...

  9. img只显示图片一部分 或 css设置背景图片只显示图片指定区域

    17:14 2016/3/22img只显示图片一部分 或 css设置背景图片只显示图片指定区域 background-position: 100% 56%; 设置背景图片显示图片的哪个坐标区域,图片左 ...

随机推荐

  1. npm修改默认配置

    1.nodejs在program files下面会造成一些项目中的问题,因此nodejs在program files下需要先卸载nodejs 2.安装nodejs到自定义的目录下面,例:D:\node ...

  2. fprintfAndFscanf简单操作

    C语言fscanf和fprintf函数的用法详解(格式化读写文件)(代码转载) #include<stdio.h> #define N 2 struct stu{ char name[10 ...

  3. Android开发必有功能,更新版本提示,检测是否有新版本更新。下载完成后进行安装。

    作者:程序员小冰,CSDN博客:http://blog.csdn.net/qq_21376985,转载请说明出处. 给大家介绍个东西,MarkDown真的超级超级好用.哈哈.好了, 正题内容如下: 先 ...

  4. HTTPS的简介

    一.什么是HTTPS HTTPS是在HTTP上建立SSL加密层,并对传输数据进行加密,是HTTP协议的安全版.现在它被广泛用于万维网上安全敏感的通讯,例如交易支付方面. HTTPS主要作用是: (1) ...

  5. Unity 深度冲突的解决方法

    Dillon|2014-02-12 10:00|5899次浏览|Unity(280)0 3d游戏中当2个片元距离近裁减平面 w  落在同一个区间的时候,他们的深度是相等的. 最终你所看到的结果,就是下 ...

  6. Ajax提交数据判断员工编号是否存在,及自动填充与员工编号所对应的员工姓名。

    JSP页面中所需要的JavaScript事件及Ajax <script type="text/javascript"> function checkEmpNo(id){ ...

  7. 消息队列之-RocketMQ入门

    简介 RocketMQ是阿里开源的消息中间件,目前已经捐献个Apache基金会,它是由Java语言开发的,具备高吞吐量.高可用性.适合大规模分布式系统应用等特点,经历过双11的洗礼,实力不容小觑. 官 ...

  8. 用笛卡尔积来创建一千六百万大表 整体19分钟 大表建成两分钟 设置id13分钟

    昨天拙文中讲述了用自增方式创建一千六百万大表的方案,这回讨论的是用笛卡儿积,实践证明这种方案更快. 2020年3月15日08点58分实验开始 创建仅有四千数据的tb_4thousand1表: SQL& ...

  9. Zookeeper原生客户端

    1.1.1.1. 客户端基本操作 package cn.enjoy.javaapi; import org.apache.zookeeper.*; import java.io.IOException ...

  10. Ubuntu修改默认Python版本,你了解多少~

    目录 1 查看Python版本 1.1 查看装有哪些版本 1.2 查看默认版本 2 修改Python默认版本 2.1 基于文件修改 2.2 基于软链接修改 1 查看Python版本 1.1 查看装有哪 ...