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

Asked 4/8, 2012 at 18:52 Answered 9/9, 2018 at 16:50

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

Beefeater answered 4/8, 2012 at 18:52 Comment(8)

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. – Beefeater 4/8, 2012 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. – Beefeater 4/8, 2012 at 19:36

@user1576497 Thanks for your efforts. Please post the answer when possible, and accept it when possible (48 hours after asking question). – Lacker 4/8, 2012 at 21:38

Best practice: always set background-image first and then background-size. – Exhibitive 4/8, 2012 at 22:24

@Exhibitive I don't see how it's a best practice, sounds like a bug in Chrome. – Peruzzi 21/2, 2013 at 0:39

@LeeWhitney updates.html5rocks.com/2013/02/… – Exhibitive 21/2, 2013 at 2:5

@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. – Peruzzi 21/2, 2013 at 17:2

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? @Exhibitive +1, thanks :) – Felicefelicia 1/5, 2013 at 16:15

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

Beefeater answered 4/2, 2014 at 19:54 Comment(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. – Hickerson 17/7, 2015 at 12:42

@maify +100 awesome answer – Morphinism 21/6, 2016 at 11:38

You only need to use !important :

background-size: cover !important;

Tunicate answered 10/4, 2013 at 13:6 Comment(3)

+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. – Katekatee 8/9, 2013 at 14:17

This works for me! I used the background properties with !important, and I guess that background-size should has it too. – Warehouseman 11/6, 2014 at 15:7

Weird. Had the exact same problem, but this fixed it. – Memoir 8/11, 2015 at 12:6

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

Irkutsk answered 21/2, 2014 at 4:7 Comment(0)

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

Drinker answered 6/8, 2012 at 16:32 Comment(1)

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. – Persevering 8/10, 2015 at 17: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.

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.

Album answered 6/12, 2013 at 15:26 Comment(0)

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.

Choose answered 17/10, 2016 at 17:38 Comment(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;}

Calamanco answered 4/8, 2012 at 21:21 Comment(0)

Try this background-size:contain;

Chadd answered 4/2, 2014 at 19:51 Comment(0)

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');
}

Allow answered 23/4, 2014 at 6:52 Comment(0)

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

Martelle answered 9/9, 2018 at 16:50 Comment(0)

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

Plascencia answered 4/4, 2013 at 13:13 Comment(1)

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) – Felicefelicia 1/5, 2013 at 16:7

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

Recommended topics

Hot tags