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

google-chrome css cover

27,150

Solution 1

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

Solution 2

You only need to use !important :

background-size: cover !important;

Solution 3

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

Solution 4

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

Solution 5

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

View more solutions

27,150

Author by

malfy

Updated on July 15, 2022

Comments

malfy almost 2 years

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