0

In the past we've used the following shorthand to define the background of an element:

<div style="background: url('http://lorempixel.com/400/200/') center center no-repeat / cover;">
</div>

This method stopped working in Chrome, Edge & Firefox very recently & no image is displayed. Opera & Safari appear unaffected.

This approach works on Chrome, Edge & Firefox:

<div style="background: url('http://lorempixel.com/400/200/') center center no-repeat; background-size: cover;">

Fiddle here: https://jsfiddle.net/6h81mzou/

What has removed support for this shortcut? To my knowledge it was working yesterday.

Is it even valid?

BaronGrivet
  • 4,364
  • 5
  • 37
  • 52
  • 2
    are your sure it was working fine? it's an invalid syntax, here is the correct one: https://jsfiddle.net/b9n3rt8y/. The `/` should always be between the size and position – Temani Afif Dec 17 '19 at 22:11
  • 1
    related: https://stackoverflow.com/a/54055521/8620333 – Temani Afif Dec 17 '19 at 22:13
  • @TemaniAfif - you are correct. The syntax is wrong. I'm wondering what changed. Either that code has always been wrong & only just stopped working. Or someone in the team changed it for some reason. If you can put an answer in I'll mark as correct. – BaronGrivet Dec 17 '19 at 22:45
  • 1
    I will close as duplicate then since I am already detailing the syntax in the other questiion – Temani Afif Dec 17 '19 at 22:48

0 Answers0