Hey guys, I'm a cs grad student, but a noob to JUCE. I've been studying the api reference but I can't find a clear cut answer to how to have a simple background image. Say I make the gui background in photoshop or illustrator, how can I import it as png, or jpeg, or anything else and use it as the background? Can anyone point me in the right direction,  not sure if the answer is in FillType somehow.


If you had "MAINBACKGROUND.PNG" as your image, you'd do this:

•Add your "MAINBACKGROUND.PNG" to your project via the IntroJucer

•Once you export the project into your IDE (Visual Studios?), you'll get a header called "BinaryData.h"

This header now contains your image, converted into code. Ignore this file, but just know that in your project, it now exists, and it now has two sub memeber called


const char * BinaryData::MAINBACKGROUND_PNG;

const int BinaryData::MAINBACKGROUND_PNGSize;


Now, in your header of your Editor (MyPluginProcessorEditor.h), add this somewhere to your class:


juce::Image MyBackground;

So, now your editor has a member called MyBackground,

In your Initializer for your class, you can set this juce::Image to your loaded png/jpg image via this:

MyBackground = ImageCache::getFromMemory(BinaryData::MAINBACKGROUND_PNG, BinaryData::MAINBACKGROUND_PNGSize);

Hope that helps you! Good luck!





To draw this image, in your overriden 'paint(Graphics& g)' method, you'd go:

void MyPluginProcessorEditor::paint(Graphics& g)


     g.drawImageAt(MyBackground, 0, 0);



Here are the basics, use BinaryBuilder to embed the graphic image in your source code, use the ImageCache::getFromMemory for loading the image, and then use drawImage(or drawImageAt/etc) in the paint() function.

1 Like