# Background Graphics

**URL:** <https://forum.juce.com/t/background-graphics/29119>\
**Category:** Audio Plugins\
**Created:** [August 24, 2018, 7:41pm UTC](https://forum.juce.com/t/background-graphics/29119 "2018-08-24T19:41:06Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![CRio](https://avatars.discourse-cdn.com/v4/letter/c/13edae/32.png) [@CRio](https://forum.juce.com/u/CRio)\
**Post date:** [August 24, 2018, 7:41pm UTC](https://forum.juce.com/t/background-graphics/29119/1 "2018-08-24T19:41:06Z")

</div>

Hey community,

I’m currently writing my first audio plugin, but i have a problem with the graphics.  
My plugin window is 860px X 508px,  
I would like to make my background white, with a grey bottom bar in full width and 350px height.  
The colours should be written like RGB values.  
Can anyone find a mistake or does anyone know how to do it better?

Here’s a Code strip:

```
void PluginAudioProcessorEditor::paint(Graphics& g)
{
	// Roh Hintergrund / Raw Backgroud
		
		//Hintergrundfrabe / Background colour
		g.fillAll (Colour (255, 255, 255) );

		//Logoleiste / Bottom Bar
		g.setColour(Colour (15, 15, 15));
		g.drawRect(300, 120, 860, 350);
}

```

Many thanks

---

<div class="post-metadata">

**Author:** ![lalala](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/lalala/32/8577_2.png) [@lalala](https://forum.juce.com/u/lalala)\
**Post date:** [August 24, 2018, 7:53pm UTC](https://forum.juce.com/t/background-graphics/29119/2 "2018-08-24T19:53:45Z")

</div>

> [@CRio](#):
>
> g.drawRect(300, 120, 860, 350);

a) you are calling `drawRect()` instead of `fillRect()` (?)  
b) you have an offset of 300 and 120  
so you probably want to do g.fillRect(0, 508 - 350, 860, 350);

you could also write it like that :

```
void PluginAudioProcessorEditor::paint (Graphics& g)
{
    auto area = getLocalBounds();
    g.setColour (Colour (15, 15, 15));
    g.fillRect (area.removeFromBottom (350));
    g.setColour (Colours::white)
    g.fillRect (area);
}

```

---

<div class="post-metadata">

**Author:** ![CRio](https://avatars.discourse-cdn.com/v4/letter/c/13edae/32.png) [@CRio](https://forum.juce.com/u/CRio)\
**Post date:** [August 24, 2018, 8:54pm UTC](https://forum.juce.com/t/background-graphics/29119/3 "2018-08-24T20:54:49Z")

</div>

yes it works 🙂

Thanks

---

<div class="post-metadata">

**Author:** ![Achder](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/achder/32/5897_2.png) [@Achder](https://forum.juce.com/u/Achder)\
**Post date:** [August 24, 2018, 9:07pm UTC](https://forum.juce.com/t/background-graphics/29119/4 "2018-08-24T21:07:40Z")

</div>

Definitely watch this video! It helped me a lot when I started using JUCE. The part about “rectangle cutting” is probably the most important in there. It’s what lalala recommends in his answer and reduces developing time a lot.

---

<div class="post-metadata">

**Author:** ![CRio](https://avatars.discourse-cdn.com/v4/letter/c/13edae/32.png) [@CRio](https://forum.juce.com/u/CRio)\
**Post date:** [August 25, 2018, 9:51am UTC](https://forum.juce.com/t/background-graphics/29119/5 "2018-08-25T09:51:15Z")

</div>

Thanks for this video, it helped my a lot.  
🙂