Is anyone else having this issue? I create websites for a living, and some employ the use of the css property background-size: cover. All of the sudden about 1 week ago, all of the sites with this property no longer display right in Google Chrome. (all other browsers are working fine.) Is anyone else experiencing this? Is it just MY google chrome or did something change? Because the backgrounds were displaying properly until about a week ago, and I did not change anything. They just stopped displaying properly, seemingly out of nowhere....
有人有这个问题吗?我创建网站是为了谋生，有些网站使用css属性:cover。大约一周前，所有拥有该属性的网站都不再在谷歌Chrome中显示。(所有其他浏览器都运行良好。)还有其他人经历过吗?是我的谷歌chrome还是有什么变化?因为直到大约一周前背景才显示正常，我没有改变任何东西。他们只是停止显示正常,似乎....凭空出现的
10 个解决方案
#1
28
Best practice: always set background-image first and then background-size.
最佳实践:总是先设置背景图像，然后设置背景大小。
#2
14
You only need to use !important :
你只需要使用!
background-size: cover !important;
#3
11
I just ran into this problem in Chrome, too.
我在Chrome上也遇到过这个问题。
None of the above answers worked for me. Specifically, I was trying to set the <body> element background to background-size: cover. However, the background image would never extend vertically to fill the page.
以上的答案对我都不起作用。具体地说，我试图将元素背景设置为background-size: cover。但是，背景图像永远不会垂直扩展来填充页面。
After some trial and error, I found that setting the <html> element width and height to 100% fixed the problem in Chrome. (For what it's worth, changing the <body> element's width and height seemed to have no effect.)
经过一些尝试和错误，我发现将元素宽度和高度设置为100%修复了Chrome中的问题。(对于它的价值，改变元素的宽度和高度似乎没有效果。)
In my css, I have the following rules to fix the issue:
在我的css中，我有以下规则来解决这个问题:
html {
width: 100%;
height: 100%;
}
#4
1
I was having the same problem all of a sudden w/ not only GC but also FF and Opera. i was using a php function to pull random images for my background and this is what i had....
我遇到了同样的问题，突然间，w/不只是GC，还有FF和Opera。我是使用一个php函数将随机图像我的背景,这就是我....
CSS:
CSS:
.main-slideshow .video img {
cursor:pointer;
width:550px !important;
height:340px !important;
background-repeat: no-repeat;
-moz-background-size:cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover; }
and HTML/PHP:
PHP和HTML /:
$result .='<img alt="" style="background:url('.$thumbnail.')" src="/images/play1.png" /> ';
it was working for some days and suddenly background-repeat and background-size stopped working. so this morning i found out that the following changes are working perfectly for GC (v21), FF (v14), Opera (v12) and Safari (v5.1.7)...still no luck w/ IE though :(
它工作了好几天，突然回到地面重复，地面大小停止工作。因此，今天早上，我发现下面的更改对GC (v21)、FF (v14)、Opera (v12)和Safari (v5.1.7)非常有效。不过还是没好运气。
CSS:
CSS:
.main-slideshow .video img {
cursor:pointer;
width:550px !important;
height:340px !important;
-moz-background-size:cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover; }
HTML/PHP:
HTML / PHP:
$result .='<img alt="" style="background-image:url('.$thumbnail.')" style="background-repeat: no-repeat" style="background-size:cover" src="/images/play1.png" />';
may be it's a lousy solution but it's working for me (so far) hope this helps some one :)
也许这是一个糟糕的解决方案，但对我来说(到目前为止)，希望这能帮助一些人:
#5
1
The following is a solution to the problem, but it won't be for everybody. I estimate that this solution will help a minority of the people experiencing the author's problem.
下面是这个问题的解决方案，但不是对所有人都适用。我估计这一解决办法将有助于少数经历作者问题的人。
The background-size option can stop working in chrome if your container is too small, vertically, compared to your background image.
如果你的容器相对于你的背景图像来说太过小，那么背景尺寸选项可以在chrome中停止工作。
I was in a situation where I had to position a small portion of a large background image across a div that was 7 pixels tall.
我当时的情况是，我必须把一个大背景图像的一小部分放到一个7像素高的div中。
In the Chrome debugger, changing the div height to 9 pixels "snapped" the background-size into place.
在Chrome调试器中，将div的高度更改为9像素，将背景尺寸“抓拍”到位。
My ultimate solution was to restructure my divs so that I would not run into this problem.
我的最终解决方案是重组我的divs，这样我就不会遇到这个问题。
To see if this solution will help you, in the Chrome debugger, enlarge your div. If, at some point, the background-size snaps into place, then you know this is the issue.
在Chrome调试器中，看看这个解决方案是否对您有所帮助，放大您的div。
#6
1
Old question but has similiar issue and it turned out I needed to add and to the empty div's I was applying background-size: cover to.
老问题，但有相似的问题，我需要加上和。对于空的div，我正在应用背景大小:cover to。
#7
0
You must do CSS hacks for google chrome.
你必须为谷歌chrome做CSS hacks。
Use body:nth-of-type(1) .elementOrClassName{property:value;}
only for google chrome.
google chrome。
for your case,
对于你的情况,
nth-of-type(1) .elementOrClassName{background-size:80px 60px;}
#8
0
Try this background-size:contain;
试试这个background-size:包含;
#9
0
For me, following worked for Chrome, IE 8, IE 9:
对我来说，跟随在Chrome IE 8 IE 9工作:
.itemFullBg{
background:url('image/path/name.png') no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-size:100% 100%;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader
(src='image/path/name.png',sizingMethod='scale');
}
#10
-3
Instead of using:
而不是使用:
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
Use:
使用:
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
background-size: 100% 100%;
#1
28
Best practice: always set background-image first and then background-size.
最佳实践:总是先设置背景图像，然后设置背景大小。
#2
14
You only need to use !important :
你只需要使用!
background-size: cover !important;
#3
11
I just ran into this problem in Chrome, too.
我在Chrome上也遇到过这个问题。
None of the above answers worked for me. Specifically, I was trying to set the <body> element background to background-size: cover. However, the background image would never extend vertically to fill the page.
以上的答案对我都不起作用。具体地说，我试图将元素背景设置为background-size: cover。但是，背景图像永远不会垂直扩展来填充页面。
After some trial and error, I found that setting the <html> element width and height to 100% fixed the problem in Chrome. (For what it's worth, changing the <body> element's width and height seemed to have no effect.)
经过一些尝试和错误，我发现将元素宽度和高度设置为100%修复了Chrome中的问题。(对于它的价值，改变元素的宽度和高度似乎没有效果。)
In my css, I have the following rules to fix the issue:
在我的css中，我有以下规则来解决这个问题:
html {
width: 100%;
height: 100%;
}
#4
1
I was having the same problem all of a sudden w/ not only GC but also FF and Opera. i was using a php function to pull random images for my background and this is what i had....
我遇到了同样的问题，突然间，w/不只是GC，还有FF和Opera。我是使用一个php函数将随机图像我的背景,这就是我....
CSS:
CSS:
.main-slideshow .video img {
cursor:pointer;
width:550px !important;
height:340px !important;
background-repeat: no-repeat;
-moz-background-size:cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover; }
and HTML/PHP:
PHP和HTML /:
$result .='<img alt="" style="background:url('.$thumbnail.')" src="/images/play1.png" /> ';
it was working for some days and suddenly background-repeat and background-size stopped working. so this morning i found out that the following changes are working perfectly for GC (v21), FF (v14), Opera (v12) and Safari (v5.1.7)...still no luck w/ IE though :(
它工作了好几天，突然回到地面重复，地面大小停止工作。因此，今天早上，我发现下面的更改对GC (v21)、FF (v14)、Opera (v12)和Safari (v5.1.7)非常有效。不过还是没好运气。
CSS:
CSS:
.main-slideshow .video img {
cursor:pointer;
width:550px !important;
height:340px !important;
-moz-background-size:cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover; }
HTML/PHP:
HTML / PHP:
$result .='<img alt="" style="background-image:url('.$thumbnail.')" style="background-repeat: no-repeat" style="background-size:cover" src="/images/play1.png" />';
may be it's a lousy solution but it's working for me (so far) hope this helps some one :)
也许这是一个糟糕的解决方案，但对我来说(到目前为止)，希望这能帮助一些人:
#5
1
The following is a solution to the problem, but it won't be for everybody. I estimate that this solution will help a minority of the people experiencing the author's problem.
下面是这个问题的解决方案，但不是对所有人都适用。我估计这一解决办法将有助于少数经历作者问题的人。
The background-size option can stop working in chrome if your container is too small, vertically, compared to your background image.
如果你的容器相对于你的背景图像来说太过小，那么背景尺寸选项可以在chrome中停止工作。
I was in a situation where I had to position a small portion of a large background image across a div that was 7 pixels tall.
我当时的情况是，我必须把一个大背景图像的一小部分放到一个7像素高的div中。
In the Chrome debugger, changing the div height to 9 pixels "snapped" the background-size into place.
在Chrome调试器中，将div的高度更改为9像素，将背景尺寸“抓拍”到位。
My ultimate solution was to restructure my divs so that I would not run into this problem.
我的最终解决方案是重组我的divs，这样我就不会遇到这个问题。
To see if this solution will help you, in the Chrome debugger, enlarge your div. If, at some point, the background-size snaps into place, then you know this is the issue.
在Chrome调试器中，看看这个解决方案是否对您有所帮助，放大您的div。
#6
1
Old question but has similiar issue and it turned out I needed to add and to the empty div's I was applying background-size: cover to.
老问题，但有相似的问题，我需要加上和。对于空的div，我正在应用背景大小:cover to。
#7
0
You must do CSS hacks for google chrome.
你必须为谷歌chrome做CSS hacks。
Use body:nth-of-type(1) .elementOrClassName{property:value;}
only for google chrome.
google chrome。
for your case,
对于你的情况,
nth-of-type(1) .elementOrClassName{background-size:80px 60px;}
#8
0
Try this background-size:contain;
试试这个background-size:包含;
#9
0
For me, following worked for Chrome, IE 8, IE 9:
对我来说，跟随在Chrome IE 8 IE 9工作:
.itemFullBg{
background:url('image/path/name.png') no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-size:100% 100%;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader
(src='image/path/name.png',sizingMethod='scale');
}
#10
-3
Instead of using:
而不是使用:
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
Use:
使用:
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
background-size: 100% 100%;