---
title: "Tips and Tricks - Transparent Images"
canonical_url: https://developer.repebble.com/blog/2015/05/13/tips-and-tricks-transparent-images/
last_updated: 2025-02-25
sdk_version: 4.33.1
---
# Tips and Tricks - Transparent Images

Source: https://developer.repebble.com/blog/2015/05/13/tips-and-tricks-transparent-images/

This is the Pebble Developer Blog. For general Pebble news and announcements, visit the main blog at [repebble.com/blog](https://repebble.com/blog).

- 13 May 2015
- [Chris Lewis](https://developer.repebble.com/blog/authors/chrislewis/)
- [Beautiful Code](https://developer.repebble.com/blog/tags/beautiful-code/)
- [Comments](https://developer.repebble.com/blog/2015/05/13/tips-and-tricks-transparent-images.md#comments)

Ever wondered how to draw transparent images in a Pebble app? This post will walk you through the process.

In this post, we'll be using a sample image with a transparency component, shown below:

[![](https://developer.repebble.com/assets/images/blog/tips-transparency-globe.png)](https://developer.repebble.com/assets/images/blog/tips-transparency-globe.png)

When adding your project resource, ensure you set its ‘type’ correctly. On CloudPebble, this is done when uploading the resource and choosing the 'PNG' type. In the SDK, this is done with the `png` `type` in the project's `appinfo.json`.

```
"media": [{"type": "png","name": "GLOBE","file": "globe.png"}]
```

This will create a resource ID to use in code:

```
RESOURCE_ID_GLOBE
```

Simply create a [`GBitmap`](https://developer.repebble.com/docs/c/Graphics/Graphics_Types.md#GBitmap "GBitmap") with this resource and draw the image with [`GCompOpSet`](https://developer.repebble.com/docs/c/Graphics/Graphics_Types.md#GCompOpSet "GCompOpSet") as the compositing mode:

```
static GBitmap \*s\_bitmap;static Layer \*s\_canvas\_layer;
```

```
static void window\_load(Window \*window) {Layer \*window\_layer = window\_get\_root\_layer(window);// Create GBitmaps\_bitmap = gbitmap\_create\_with\_resource(RESOURCE\_ID\_GLOBE);// Create canvas Layers\_canvas\_layer = layer\_create(layer\_get\_bounds(window\_layer));layer\_set\_update\_proc(s\_canvas\_layer, layer\_update\_proc);layer\_add\_child(window\_layer, s\_canvas\_layer);}
```

```
static void layer\_update\_proc(Layer \*layer, GContext \*ctx) {// Draw the image with the correct compositing modegraphics\_context\_set\_compositing\_mode(ctx, GCompOpSet);graphics\_draw\_bitmap\_in\_rect(ctx, s\_bitmap, gbitmap\_get\_bounds(s\_bitmap));}
```

When drawing on a [`TextLayer`](https://developer.repebble.com/docs/c/User_Interface/Layers/TextLayer.md "TextLayer") underneath `s_canvas_layer`, the result looks like this:

![result-aplite](https://developer.repebble.com/assets/images/blog/tips-result-aplite.png)

See a full demo of this technique on the [pebble-examples GitHub repo](https://github.com/pebble-examples/feature-image-transparent).

Job done! Any transparent pixels in the original image will be drawn as clear, leaving the color beneath unaffected.

Read the [Image Resources](https://developer.repebble.com/guides/app-resources.md) guide to learn more about transparent PNGs.

## Conclusion

So there you have it. Using these examples you can easily implement transparency on all Pebble platforms. To learn more, read the [`GCompOp`](https://developer.repebble.com/docs/c/Graphics/Graphics_Types.md#GCompOp "GCompOp") documentation or the [`pebble-examples/feature-image-transparent`](https://github.com/pebble-examples/feature-image-transparent) SDK example.

* * *