background-image in less rendered as [object Object]

[MichaelCereda]

I'm trying to add a background-image in a less file.

.contact{
  .fixed-column-container{
    background: url('../assets/intro.jpg') transparent center center no-repeat;
    background-size: 70%;
  }
}

but it gets rendered as

.contact .fixed-column-container {
    background: url([object Object]) transparent center center no-repeat;
    background-size: 70%;
}

any suggestion?
thank you

[patrykkopycinski]

hey @MichaelCereda do you have loader for .jpg files? because by default Gatbsy doesn't contain any loader for images:
https://github.com/gatsbyjs/gatsby/blob/master/lib/utils/webpack.config.js#L220

[MichaelCereda]

@patrykkopycinski Oh.. no .. no loader :S.
I was suspecting about that... thank you.

do you suggest any particular loader? i just wanted the css to render it as plain css

.contact .fixed-column-container {
    background: url('../assets/intro.jpg') transparent center center no-repeat;
    background-size: 70%;
}

[patrykkopycinski]

file-loader should do the job

[ihororlovskyi]

@patrykkopycinski thanks
file-loader helped me

[colbycheeze]

How do you "add file-loader" to the project? (sorry, I'm really noob at webpack)
I'm having the same issue right now in my project.

[KyleAMathews]

Hey Colby, you are in luck!
https://github.com/gatsbyjs/gatsby/releases/tag/v0.12.0

Fixed in latest release. Hadn't quite gotten to closing this.
On Wed, Jul 20, 2016 at 12:41 PM Colby Williams notifications@github.com
wrote:

How do you "add file-loader" to the project? (sorry, I'm really noob at
webpack)
I'm having the same issue right now in my project.

—
You are receiving this because you are subscribed to this thread.

Reply to this email directly, view it on GitHub
#287 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAEVh7sNBnmNQcgZsdWOBLF3uKEOX_Wnks5qXnnqgaJpZM4Iduuc
.

[colbycheeze]

Wow, good timing. Thanks a bunch 😄