Invalid property value in CSS using: Bourbon SASS. +retinaimage deprecated from V4 using V6

I am currently taking the Brad Hussey SASS course on his YouTube channel: https://youtu.be/q5BO71n8Fbk?list=PLUoqTnNH-2XxOt7UsKlTqbfrA2ucGosCR

I'm on video #10 currently.

Using Bourbon in its current version, 6. Bourbon deprecated +retinaimage after v4 and on their website it simply says to use vanilla CSS. Fine, I thought. So I filled in the CSS in place of +retinaimage. Here's the code:

.brand
  +hide-text
  background-image: url('..img/bourbon-logo_2x.png', 294px 56px)
  background: center no-repeat
  height: 56px
  margin: $gutter auto

The code is from a SASS partial called _common.sass which compiles to app.css and the code compiled from the sass to app.css is:

.brand {
  overflow: hidden;
  text-indent: 101%;
  white-space: nowrap;
  background-image: url("..img/bourbon-logo_2x.png", 294px 56px);
  background: center no-repeat;
  height: 56px;
  margin: 30px auto; }

Seemed logical.

Unfortunately the image is not showing on the page. I have copied the entire project path of the image, used different URLs pointing to hosted images.

Still I get the error.

I have searched, looked the YouTube comments and tried suggestions.

Still getting the error, so I'm asking what am I doing wrong?

I will upload the 2 images I grabbed. Hope someone cab help.

Simon

Invalid property from Chrome DEV

Larger Screenshot

Your second background statement is overriding the first.

  background-image: url("..img/bourbon-logo_2x.png", 294px 56px);
  background: center no-repeat;

The background shorthand CSS property sets all background style properties at once, such as color, image, origin and size, or repeat method.

MDN

Switch the order:

 background: center no-repeat;
 background-image: url("..img/bourbon-logo_2x.png", 294px 56px);