想做一个个人展示类的网站首页,用整张图片来当背景,浏览器窗口放大缩小时背景图片不会变形,需要用到分层来实现其他功能,就用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. JVM关键字try、catch、finally、return执行过程

    关键字:jvm try catch finally return.指令 finally相当于在所有方法返回之前执行一次 finally中含有return其中finally中return会覆盖try和c ...

  2. 为什么golang中不存在三元运算符

    三元运算符广泛存在于其他语言中,比如: python: val = trueValue if expr else falseValue javascript: const val = expr ? t ...

  3. 使用Docker构建PHP7.4 + Swoole + Redis镜像

    使用Docker构建PHP7.4 + Swoole + Redis镜像 Docker是一个用于开发,交付和运行应用程序的开放平台.开发者可以利用Docker来快速交付,测试和部署代码,从而大大减少编写 ...

  4. 填坑 | .NET core项目远程部署后连接数据库 mysql表大小写敏感问题

    欣喜成功部署了项目之后又遭遇重创hhh,swagger调试数据库,报错 MySql.Data.MySqlClient.MySqlException(0x80004005) 我猜是大小写的问题,一查果然 ...

  5. leetcode-双指针遍历

    编写一个函数,其作用是将输入的字符串反转过来.输入字符串以字符数组 char[] 的形式给出.不要给另外的数组分配额外的空间,你必须原地修改输入数组.使用 O(1) 的额外空间解决这一问题.你可以假设 ...

  6. VMware中卸载安装Ubuntu系统 ——Ubuntu系统配置(一)

    由于之前配置给Ubuntu的磁盘空间不足,进行了扩展磁盘空间,结果Ubuntu无法开机了,试了很多种办法都没成功,也有些后悔没有记录下配置过程,于是决定卸载Ubuntu进行重新安装和配置. 一.VMw ...

  7. SpringBoot favicon.ico网站图标

    1.在application.properties下添加spring.mvc.favicon.enabled=false 默认true开启 2.关闭后,需要在src/main/resources/st ...

  8. 原生js实现jquery的siblings()

    Element.prototype.siblings = function(callback){ var siblingElement = []; var parentAllElement = []; ...

  9. html基础:DOM操作

    DOM(Document Object Model 文档对象模型) 一个web页面被封装成一个dom对象,通过dom中的js对页面的标签进行操作 一.获取对象 浏览器页面上右键--检查--consol ...

  10. Appium之定位元素

     常用的appium元素定位工具: (1)Android SDK 中提供的元素定位工具uiautomatorviewer: (2)AppiumDesktop提供的元素定位工具Appium Inspec ...