SetOpaque and layered components

Im trying to optimize some code and noticed that my parent container was updating itself every time i did something in my child component so I tried investigating and found the SetOpaque(...) function but I get some weird results and need help understanding how this is supposed to work.

Scenario:
1) I have a component (lets call it "main") that adds another component as background (lets call it "background"). The "background" is the same size as "main".
2) In "main" there is also a viewPort, lying layered on top of the "background" with smaller bounds than "main" and "background"

Problem: 
* Every time I scroll inside the viewPort, "background" gets repainted.

Semi-Working Solution:
* Using SetOpaque(true) on the viewPort makes "background" skip its painting when the contents of the viewPort is updated, however, what is added to the graphic context from the viewPort is now shown in "main".
 
What would be a working solution? I can rearrange the components if thats necessary.
Thanks for any help on this.

 

Edit: Nvm, I managed to sort it out, just need to setOpaque(true) on everything basically :) The result in the semi-working solution i had was due to 1 of the components actually had some transparent areas that I missed.