The following tutorial covers changing of Brio Theme top portlets background images on a Plone 4 website. Instruction for changing them in Plone 3 - see in How to replace Brio Theme top images in Plone 3 tutorial.
Brio Plone 4 Theme can include one or two portlets on its top area. Portlets text will be displayed on the following yellow and brown background images (if portlets are assigned to columns A and B):
And on the following background image (if portlet is assigned to column C only):
You can replace those default images with yours via Zope Management Interface (ZMI). Go to ZMI and select portal_skins -> brio_plone_theme. You will see top-brown.png, top-yellow-wide.png, and top-yellow.png images that are used as default portlet background images:
Let's for example replace the images, used for the top area right part - for this open top-brown.png image to see information about it, including its Id, dimension, size, modification date. Press Customize to replace this image with a new one:
Browse your local disk for the necessary image and press Upload:
Now this image will be used as default top portlet column B background image:
When you return to Plone interface, you'll see the image, you've just uploaded on the top area right part:
In the same way you can customize default yellow and yellow-wide images.