background-size

I'm going bonkers. IE11 refuses to fill the entire area of a DIV with a background image, even though I've set the background-size property to cover. Consider the following example: CSS: .bg { width: 100%; min-height: 220px; background: url("bg.jpg") center top no-repeat; background-attachment: fixed; background-size: cover; } HTML: <div class="bg">bla</div> <div class="bg">blabla<br />blabla</div> Chrome, Firefox, Safari, Opera all do what I expect to happen: the background image, bg.jpg, is always covering the full visible area of the DIVs, no matter what the proportions of the browser

CSS 可以添加背景颜色和背景图片，以及进行图片设置。 none : 　无背景图（默认的） url : 　使用绝对或相对地址指定背景图像 background-image 属性允许指定一个图片展示在背景中（只有CSS3才可以多背景）可以和 background-color 连用。 如果图片不重复地话，图片覆盖不到地地方都会被背景色填充。 如果有背景图片平铺，则会覆盖背景颜色。 小技巧： 我们提倡 背景图片后面的地址，url不要加引号。 背景平铺（repeat） 语法： background-repeat : repeat | no-repeat | repeat-x | repeat-y 　 参数： repeat : 　背景图像在纵向和横向上平铺（默认的） no-repeat : 　背景图像不平铺 repeat-x : 　背景图像在横向上平铺 repeat-y : 　背景图像在纵向平铺 设置背景图片时，默认把图片在水平和垂直方向平铺以铺满整个元素。 repeat-x : 　背景图像在横向上平铺 repeat-y : 　背景图像在纵向平铺 设置背景图片时，默认把图片在水平和垂直方向平铺以铺满整个元素。 背景位置(position) 语法： background-position : length || length background-position : position ||

1.background-size （1）可以指定数值，图片可能会失真 background-size：100px 100px ; （2）可以指定百分比 background-size：100% 100% ; （3）指定contain,包含 ，等比例缩放，图片是完整的，可能会留白 background-size：contain ; （4）指定cover,覆盖，等比例缩放，可能图片不完整 background-size：cover ; 2.background-position background-position:center center; 3.background-clip 背景裁切，可以设置背景的显示范围 （1）background-clip:border-box;(默认值) 显示范围：border+padding+content （2）background-clip:padding-box;显示范围：padding+content （3）background-clip:content-box;显示范围：content 4.background-origin 背景显示的原点 （1）background-originp:border-box; （2）background-origin:padding-box;(默认值) （3）background-origin:content

作者：魔洁 聊到3d那我们就先聊聊空间维度，首先一维，比如一条线就是一个一维空间，连点成线在这个空间里这些点只能前进后退，二维空间就是一个平面，这时点不仅可以前进后退还可以左右移动，3维空间也可以说是3d，这时点可以前进后退，左右，上下移动。css3里有几个关于3d运动的属性以及值我做一下解释 transform-style:preserve-3d;（transform-style是属性）（preserve-3d是值） （这个属性可以把一个处于2维的div变为3d空间，把这个属性比作一个相机的摄像头,这个div内的内容会以3d的形式通过摄像头的形式反馈给你,他的子元素才会享受3d效果,子元素以下的元素就不会有3d效果。） perspective:800px; （这个属性是配合上边的属性使用的 ，把这个属性比作你的屏幕距离摄像头的距离） transform:rotateY(180deg); (把这个3d空间div看做一个人rotateY(180deg)，是做y轴旋转180°，y轴可以看作是一个人原地转身) transform:rotatex(180deg); （rotateY(180deg)，是做x轴旋转180°，x轴可以看作是一个人原地翻跟斗） transform:rotateZ(180px); （rotateZ(180px)，是在前进180px

I'm trying to set the size (both width and height) of a div to match it's background image size, but I can't get it working. The background image size has to be in percentages, because I'm dealing with a responsive website. On smaller screens, the background should be displayed completely (with less width, but still proportional), and the div who has the image should follow that size. I tried various values of the background-size, such as auto 100%, cover, contain, etc. but nothing did the trick. There's a similar question here about this: scale div to background image size but it didn't solve

This may already be answered somewhere but I haven't found yet after a bit of searching. I have a series of divs with background-images. The size is set to background-size: cover. But I want to be able to have the images zoom in and grow on hover. This transition doesn't work with the cover attribute it seems. Actually, the image zooms but without the transition effect. It goes instantly from "cover" to, in this case, 110%. It works fine when the original background-size was set as 100%. But with this, on resizing the page the image seems to tile somewhat behind the div, which is not what I

is there an easy way to get the final height and width of a background image with Javascript or jQuery even if a background-size property was applied? I mean, I know I can get the background image url and load it to an Image object and then get the width and height. But it is the size of the source image. If someone scaled it with CSS then the size changed How can I find its final size? @edit it is different from the question marked as similar because it doesnt say how to get the size in pixels if someone changed the background-size Using getComputedStyle , I've created this script that

When i set the background-size property from an image of a div to background-size: cover; or background-size: 100%; , the both look the same. What is the difference? When should i use cover and when 100%? cover = Scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area Basically it zooms in until the inner most edges are touching the side, which means that some of the image may be cut off unlike 100% where all of the image will be

1.背景透明 background-color:rgba(0,0,0,.2) 2.背景大小 background-size: 取值：可以是像素单位 ，也可以是百分比 <style> .box { width: 600px; height: 600px; border: 1px solid blue; /* background-image: url(./images/l.jpg) */ background: url(./images/l.jpg) no-repeat; /* background-size: 300px; 只有一个值的时候，表示设置的宽度，但是高度也会随时一块等比例缩放 */ /* background-size: 300px 500px; 两个值的时候，第一个表示宽度，第二个表示高度 */ /* background-size: 50%; 图片要跟着盒子的宽度来设置百分比 */ /* background-size: cover; 铺满整个盒子，是等比例进行缩放铺满的，如果有溢出，则会将溢出隐藏掉*/ /* background-size: contain; 进行等比例缩放,只要有一边到达了盒子边框则停止缩放 */ } </style> 3.多背景图片 就是将多个图片路径写在一块，中间用，隔开 background:url(image/aa.png) no

I'm using the background-size property for a full width and height background image but having trouble getting it to fully cover in Chrome on a Nexus7 tablet in portrait view. It only covers the width and not the height i.e. there is about 200px of white space below it. However when I view the site in desktop Chrome (or anything else) and on a vertical monitor to emulate portrait dimensions it covers no problem. Anyone have a solution? CSS: html { background: url(/images/post_bg.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: