想做一个个人展示类的网站首页,用整张图片来当背景,浏览器窗口放大缩小时背景图片不会变形,需要用到分层来实现其他功能,就用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. 3D渲染集群,你了解多少?

    摘要:渲染是批处理运行模式,那能不能使用Docker容器技术,做大规模的渲染集群呢? 我们先说说3D渲染涉及哪些领域: 1.什么是3D渲染 简单粗暴的讲:就是将虚拟世界里的3D模型,变为(人眼看到)平 ...

  2. C# DataTable查询示例

    代码 public void Test() { #region 初始化数据 /* 数据 张三 语文 34.00 张三 数学 58.00 张三 英语 61.00 李四 语文 45.00 李四 数学 87 ...

  3. [CSP-S2019]树的重心 题解

    CSP-S2 2019 D2T3 考场上扔了T2来打这题的部分分,然后没看到数据范围是等号,不知道怎么判完全二叉树然后40分滚粗…… ---- 思路分析 很容易想到$O(n^2)$每次暴力找重心,这个 ...

  4. 【WEB自动化测试之控件定位】基于HTML5控件的唯一控件属性定位

      一.WEB控件定位是什么 要想弄懂这个问题,我们还是基于实践来学习.我们先来看一条入门级别自动化测试用例的构成. DemoCase:正确用户名和密码登录博客园,登录成功 URL: https:// ...

  5. Alink漫谈(二十) :卡方检验源码解析

    Alink漫谈(二十) :卡方检验源码解析 目录 Alink漫谈(二十) :卡方检验源码解析 0x00 摘要 0x01 背景概念 1.1 假设检验 1.2 H0和H1是什么? 1.3 P值 (P-va ...

  6. Android中的Activity四种启动模式(launchMode)

    转载:http://blog.csdn.net/cjjky/article/details/7533110          我们在开发项目的过程中,会涉及到该应用中多个Activity组件之间的跳转 ...

  7. 使用rabbitmq过程中遇到的问题及解决方法记录。

    OS: Linux ---Centos7RabbitMQ版本:RabbitMQ version: 3.8.1erlang版本:Erlang configuration: Erlang/OTP 22 [ ...

  8. 目标识别AI资料

    朋友推荐的, 还有自己搜的. 入门可以看看. 网上资料应该不少, 一搜一大把, 简单记下地址. Review of Deep Learning Algorithms for Object Detect ...

  9. 【已学完】UGUI Schedule

    章节 内容 签到 Unity4.6 New UI(UGUI) 1.UGUI概述与Canvas画布介绍(一) 5月14日 2.Canvas画布介绍(二) 5月14日 3.Text控件 5月14日 4.I ...

  10. OpenShift Container Platform 4.3.0部署实录

    本文参照红帽官方文档,在裸机安装Openshift4.3文档进行.因为只有一台64G内存的PC机,安装vmware vsphere 6.7免费版进行本测试,所以尝试在OCP官方文档要求的最低内存需求基 ...