Background-size: cover suddenly stopped working in Google Chrome?

Question

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....

lmfao this site is retarded.... I cant answer my own question for SEVEN HOURS!!!!! even though I figured it out. I only wanted to answer in case someone else has this problem. The issue was I had to FIRST define my background image. THEN set the size property. Setting the size first and defining the image second will not work. This however did NOT matter about a week ago, its still worked despite what order they were in. — malfy, Aug 04 '12 at 19:29
In fact, it was still working fine in Safari when it stopped working in Chrome. Which means some browsers don't care about the order in which the css is parsed. — malfy, Aug 04 '12 at 19:36
@user1576497 Thanks for your efforts. Please post the answer when possible, and accept it when possible (48 hours after asking question). — Rob W, Aug 04 '12 at 21:38
Best practice: always set `background-image` first and then `background-size`. — Ana, Aug 04 '12 at 22:24
@Ana I don't see how it's a best practice, sounds like a bug in Chrome. — whitneyland, Feb 21 '13 at 00:39
@LeeWhitney http://updates.html5rocks.com/2013/02/CSS-Background-shorthand-coming-to-mobile-WebKit-browsers — Ana, Feb 21 '13 at 02:05
@Ana, wow you are absolutely correct thanks for the citation. You should get credit for submitting this as an answer because it really explains the root of the issue. +1. — whitneyland, Feb 21 '13 at 17:02
user1576497 - this site is amazing. Search for a coding problem on google and, over time, 75% of your answers will originate here. Plus it gives you real-time support from a vast community of users to answer any problems you have that you can't find by searching... Rather than complaining about the fact that Chrome updated their background shorthand, why not take some time to explain it to users like myself who are searching for the "why" to this problem? @Ana +1, thanks :) — 1nfiniti, May 01 '13 at 16:15

score 35 · Accepted Answer · answered Feb 04 '14 at 19:54

35

Best practice: always set background-image first and then background-size.

answered Feb 04 '14 at 19:54

malfy

815
1
10
13

2

+1. I just got bitten in the rear by this. Putting it in the wrong order reverted in Chrome to auto and the inspector was not offering any clues as to why. – rollingBalls Jul 17 '15 at 12:42
1

@maify +100 awesome answer – Sudhir Belagali Jun 21 '16 at 11:38

score 17 · Answer 2 · answered Apr 10 '13 at 13:06

17

You only need to use !important :

background-size: cover !important;

answered Apr 10 '13 at 13:06

gregs67

171
1
3

1

+1, Weird but true. This also applies to any other `background-*` attributes which aren't behaving correctly, in my case `background-repeat` and `background-position`. – Engineer Sep 08 '13 at 14:17
This works for me! I used the background properties with !important, and I guess that background-size should has it too. – Rahnzo Jun 11 '14 at 15:07
Weird. Had the exact same problem, but this fixed it. – heffaklump Nov 08 '15 at 12:06

score 14 · Answer 3 · answered Feb 21 '14 at 04:07

I just ran into this problem in Chrome, too.

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.

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.)

In my css, I have the following rules to fix the issue:

html {
  width: 100%;
  height: 100%;
}

AlwaysANovice · Answer 4 · 2012-08-06T16:44:49.487

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....

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:

$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 :(

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:

    $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 :)

You should combine both `style` attribute statements into one for valid HTML, so the `background-image: url(...);` should go in front of the `background-repeat`. Now you're declaring the `style` twice, which might cause problems in the browser. At least it is invalid HTML. — Philip, Oct 08 '15 at 17:01

Brian Webster · Answer 5 · 2013-12-06T16:25:43.563

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.

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.

In the Chrome debugger, changing the div height to 9 pixels "snapped" the background-size into place.

My ultimate solution was to restructure my divs so that I would not run into this problem.

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.

score 1 · Answer 6 · edited Oct 17 '16 at 17:39

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.

edited Oct 17 '16 at 17:39

Petter Friberg

21,252
9
60
109

answered Oct 17 '16 at 17:38

Dave Bergschneider

403
6
23

score 0 · Answer 7 · answered Aug 04 '12 at 21:21

0

You must do CSS hacks for google chrome.

Use body:nth-of-type(1) .elementOrClassName{property:value;}

only for google chrome.

for your case,

nth-of-type(1) .elementOrClassName{background-size:80px 60px;}

answered Aug 04 '12 at 21:21

Josua Marcel C

3,122
6
45
87

score 0 · Answer 8 · answered Feb 04 '14 at 19:51

0

Try this background-size:contain;

answered Feb 04 '14 at 19:51

Vinay Mehta

13
1
1
3

score 0 · Answer 9 · answered Apr 23 '14 at 06:52

For me, following worked for 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');
}

score 0 · Answer 10 · answered Sep 09 '18 at 16:50

You can fix the problem by setting the height of the tag. For example, if you have a page that has a background image, set the height of the html and body tags in the CSS, like so:

html { height:100%;  min-height:100%;  } body{  min-height:100%;  }

hope this helps

score -3 · Answer 11 · answered Apr 04 '13 at 13:13

-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%;

answered Apr 04 '13 at 13:13

Leo

578
9
15

2

this will cause stretching/squishing of the image if it's not the exact dimensions of the element you're trying to "cover" (the whole point of the cover property in the first place) – 1nfiniti May 01 '13 at 16:07

Background-size: cover suddenly stopped working in Google Chrome?

11 Answers11

Linked