> ## Documentation Index
> Fetch the complete documentation index at: https://cloudinary.com/documentation/llms.txt
> Use this file to discover all available pages before exploring further.

# Layer placement


This page covers how to position and arrange layers on images. For the layer syntax itself, see [Layer syntax](layers). For transformations and relative sizing, see [Transforming layers](image_layer_transformations).


## The `fl_layer_apply` flag

The `fl_layer_apply` component not only acts as the closing bracket for the layer, but is also used to include any options that will control how the layer is placed on the base image, and any details regarding the relationship between the overlay element and the base image.

> **NOTE**: Some Cloudinary SDKs use layer apply flags as described, and any placement qualifiers must also be the last component of the layer transformation. However some of the Cloudinary SDKs don't use a specific layer apply flag. Instead, when the SDK generates the transformation URL from your code, it automatically adds the fl_layer_apply flag together with placement qualifiers based on the transformation hierarchy in your SDK code.
## Positioning layers with gravity

To determine the position of the new layer, you can add the [gravity](transformation_reference#g_gravity) parameter to define the location to place the layer within the base image ('center' by default). The `gravity` parameter is added in the same component as the `layer_apply` flag. 

For example, to add an image overlay to the base image with gravity set to west (`l_lotus_layer/fl_layer_apply,g_west`):

![Image with precisely placed overlay](https://res.cloudinary.com/demo/image/upload/l_lotus_layer/w_0.5/fl_layer_apply,g_west/docs/camera.jpg "thumb: w_500")

```nodejs
cloudinary.image("docs/camera.jpg", {transformation: [
  {overlay: "lotus_layer"},
  {width: "0.5", crop: "scale"},
  {flags: "layer_apply", gravity: "west"}
  ]})
```

```react
import { source } from "@cloudinary/url-gen/actions/overlay";
import { scale } from "@cloudinary/url-gen/actions/resize";
import { image } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";
import { compass } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryImage("docs/camera.jpg").overlay(
  source(
    image("lotus_layer").transformation(
      new Transformation().resize(scale().width(0.5))
    )
  ).position(new Position().gravity(compass("west")))
);
```

```vue
import { source } from "@cloudinary/url-gen/actions/overlay";
import { scale } from "@cloudinary/url-gen/actions/resize";
import { image } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";
import { compass } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryImage("docs/camera.jpg").overlay(
  source(
    image("lotus_layer").transformation(
      new Transformation().resize(scale().width(0.5))
    )
  ).position(new Position().gravity(compass("west")))
);
```

```angular
import { source } from "@cloudinary/url-gen/actions/overlay";
import { scale } from "@cloudinary/url-gen/actions/resize";
import { image } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";
import { compass } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryImage("docs/camera.jpg").overlay(
  source(
    image("lotus_layer").transformation(
      new Transformation().resize(scale().width(0.5))
    )
  ).position(new Position().gravity(compass("west")))
);
```

```js
import { source } from "@cloudinary/url-gen/actions/overlay";
import { scale } from "@cloudinary/url-gen/actions/resize";
import { image } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";
import { compass } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryImage("docs/camera.jpg").overlay(
  source(
    image("lotus_layer").transformation(
      new Transformation().resize(scale().width(0.5))
    )
  ).position(new Position().gravity(compass("west")))
);
```

```python
CloudinaryImage("docs/camera.jpg").image(transformation=[
  {'overlay': "lotus_layer"},
  {'width': "0.5", 'crop': "scale"},
  {'flags': "layer_apply", 'gravity': "west"}
  ])
```

```php
use Cloudinary\Transformation\Overlay;
use Cloudinary\Transformation\Resize;
use Cloudinary\Transformation\Source;
use Cloudinary\Transformation\Position;
use Cloudinary\Transformation\Gravity;
use Cloudinary\Transformation\Compass;

(new ImageTag('docs/camera.jpg'))
	->overlay(Overlay::source(
	Source::image("lotus_layer")
	->transformation((new Transformation())
	->resize(Resize::scale()->width(0.5)))
	)
	->position((new Position())
	->gravity(
	Gravity::compass(
	Compass::west()))
	)
	);
```

```java
cloudinary.url().transformation(new Transformation()
  .overlay(new Layer().publicId("lotus_layer")).chain()
  .width(0.5).crop("scale").chain()
  .flags("layer_apply").gravity("west")).imageTag("docs/camera.jpg");
```

```ruby
cl_image_tag("docs/camera.jpg", transformation: [
  {overlay: "lotus_layer"},
  {width: 0.5, crop: "scale"},
  {flags: "layer_apply", gravity: "west"}
  ])
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Overlay(new Layer().PublicId("lotus_layer")).Chain()
  .Width(0.5).Crop("scale").Chain()
  .Flags("layer_apply").Gravity("west")).BuildImageTag("docs/camera.jpg")
```

```dart
cloudinary.image('docs/camera.jpg').transformation(Transformation()
	.overlay(Overlay.source(
	Source.image("lotus_layer")
	.transformation(new Transformation()
	.resize(Resize.scale().width(0.5)))
	)
	.position(Position()
	.gravity(
	Gravity.compass(
	Compass.west()))
	)
	));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setOverlay("lotus_layer").chain()
  .setWidth(0.5).setCrop("scale").chain()
  .setFlags("layer_apply").setGravity("west")).generate("docs/camera.jpg")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation()
  .overlay(new Layer().publicId("lotus_layer")).chain()
  .width(0.5).crop("scale").chain()
  .flags("layer_apply").gravity("west")).generate("docs/camera.jpg");
```

```flutter
cloudinary.image('docs/camera.jpg').transformation(Transformation()
	.overlay(Overlay.source(
	Source.image("lotus_layer")
	.transformation(new Transformation()
	.resize(Resize.scale().width(0.5)))
	)
	.position(Position()
	.gravity(
	Gravity.compass(
	Compass.west()))
	)
	));
```

```kotlin
cloudinary.image {
	publicId("docs/camera.jpg")
	 overlay(Overlay.source(
	Source.image("lotus_layer") {
	 transformation(Transformation {
	 resize(Resize.scale() { width(0.5F) }) })
	 }) {
	 position(Position() {
	 gravity(
	Gravity.compass(
	Compass.west()))
	 })
	 }) 
}.generate()
```

```jquery
$.cloudinary.image("docs/camera.jpg", {transformation: [
  {overlay: new cloudinary.Layer().publicId("lotus_layer")},
  {width: "0.5", crop: "scale"},
  {flags: "layer_apply", gravity: "west"}
  ]})
```

```react_native
import { source } from "@cloudinary/url-gen/actions/overlay";
import { scale } from "@cloudinary/url-gen/actions/resize";
import { image } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";
import { compass } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryImage("docs/camera.jpg").overlay(
  source(
    image("lotus_layer").transformation(
      new Transformation().resize(scale().width(0.5))
    )
  ).position(new Position().gravity(compass("west")))
);
```
    
![Video with precisely placed overlay](https://res.cloudinary.com/demo/video/upload/l_lotus_layer/fl_layer_apply,g_west/docs/sunglasses.mp4 "thumb: w_500")

```nodejs
cloudinary.video("docs/sunglasses", {transformation: [
  {overlay: "lotus_layer"},
  {flags: "layer_apply", gravity: "west"}
  ]})
```

```react
import { source } from "@cloudinary/url-gen/actions/overlay";
import { image } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";
import { compass } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryVideo("docs/sunglasses.mp4").overlay(
  source(image("lotus_layer")).position(new Position().gravity(compass("west")))
);
```

```vue
import { source } from "@cloudinary/url-gen/actions/overlay";
import { image } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";
import { compass } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryVideo("docs/sunglasses.mp4").overlay(
  source(image("lotus_layer")).position(new Position().gravity(compass("west")))
);
```

```angular
import { source } from "@cloudinary/url-gen/actions/overlay";
import { image } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";
import { compass } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryVideo("docs/sunglasses.mp4").overlay(
  source(image("lotus_layer")).position(new Position().gravity(compass("west")))
);
```

```js
import { source } from "@cloudinary/url-gen/actions/overlay";
import { image } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";
import { compass } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryVideo("docs/sunglasses.mp4").overlay(
  source(image("lotus_layer")).position(new Position().gravity(compass("west")))
);
```

```python
CloudinaryVideo("docs/sunglasses").video(transformation=[
  {'overlay': "lotus_layer"},
  {'flags': "layer_apply", 'gravity': "west"}
  ])
```

```php
use Cloudinary\Transformation\Overlay;
use Cloudinary\Transformation\Source;
use Cloudinary\Transformation\Position;
use Cloudinary\Transformation\Gravity;
use Cloudinary\Transformation\Compass;

(new VideoTag('docs/sunglasses.mp4'))
	->overlay(Overlay::source(
	Source::image("lotus_layer"))
	->position((new Position())
	->gravity(
	Gravity::compass(
	Compass::west()))
	)
	);
```

```java
cloudinary.url().transformation(new Transformation()
  .overlay(new Layer().publicId("lotus_layer")).chain()
  .flags("layer_apply").gravity("west")).videoTag("docs/sunglasses");
```

```ruby
cl_video_tag("docs/sunglasses", transformation: [
  {overlay: "lotus_layer"},
  {flags: "layer_apply", gravity: "west"}
  ])
```

```csharp
cloudinary.Api.UrlVideoUp.Transform(new Transformation()
  .Overlay(new Layer().PublicId("lotus_layer")).Chain()
  .Flags("layer_apply").Gravity("west")).BuildVideoTag("docs/sunglasses")
```

```dart
cloudinary.video('docs/sunglasses.mp4').transformation(Transformation()
	.overlay(Overlay.source(
	Source.image("lotus_layer"))
	.position(Position()
	.gravity(
	Gravity.compass(
	Compass.west()))
	)
	));
```

```swift
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation()
  .setOverlay("lotus_layer").chain()
  .setFlags("layer_apply").setGravity("west")).generate("docs/sunglasses.mp4")
```

```android
MediaManager.get().url().transformation(new Transformation()
  .overlay(new Layer().publicId("lotus_layer")).chain()
  .flags("layer_apply").gravity("west")).resourceType("video").generate("docs/sunglasses.mp4");
```

```flutter
cloudinary.video('docs/sunglasses.mp4').transformation(Transformation()
	.overlay(Overlay.source(
	Source.image("lotus_layer"))
	.position(Position()
	.gravity(
	Gravity.compass(
	Compass.west()))
	)
	));
```

```kotlin
cloudinary.video {
	publicId("docs/sunglasses.mp4")
	 overlay(Overlay.source(
	Source.image("lotus_layer")) {
	 position(Position() {
	 gravity(
	Gravity.compass(
	Compass.west()))
	 })
	 }) 
}.generate()
```

```jquery
$.cloudinary.video("docs/sunglasses", {transformation: [
  {overlay: new cloudinary.Layer().publicId("lotus_layer")},
  {flags: "layer_apply", gravity: "west"}
  ]})
```

```react_native
import { source } from "@cloudinary/url-gen/actions/overlay";
import { image } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";
import { compass } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryVideo("docs/sunglasses.mp4").overlay(
  source(image("lotus_layer")).position(new Position().gravity(compass("west")))
);
```

To fine-tune the exact location of the layer, you can offset the overlay from the focus of gravity by also adding the `x` and `y` coordinate offset parameters. These parameters accept either integer values representing the number of pixels to adjust the overlay position in the horizontal or vertical directions, or decimal values representing a percentage-based offset relative to the containing image (e.g., 0.2 for an offset of 20%).

For example, to place a text overlay at a vertical distance of 5% from the top of the image (`l_text:Roboto_400:Paradise/fl_layer_apply,g_north,y_0.05`):

![Text added to image using % offset](https://res.cloudinary.com/demo/image/upload/l_text:Roboto_400:Paradise/fl_layer_apply,g_north,y_0.05/docs/row-boat-sea-mountains.jpg "thumb: w_500")

```nodejs
cloudinary.image("docs/row-boat-sea-mountains.jpg", {transformation: [
  {overlay: {font_family: "Roboto", font_size: 400, text: "Paradise"}},
  {flags: "layer_apply", gravity: "north", y: "0.05"}
  ]})
```

```react
import { source } from "@cloudinary/url-gen/actions/overlay";
import { text } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";
import { TextStyle } from "@cloudinary/url-gen/qualifiers/textStyle";
import { compass } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryImage("docs/row-boat-sea-mountains.jpg").overlay(
  source(text("Paradise", new TextStyle("Roboto", 400))).position(
    new Position()
      .gravity(compass("north"))
      .offsetY(0.05)
  )
);
```

```vue
import { source } from "@cloudinary/url-gen/actions/overlay";
import { text } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";
import { TextStyle } from "@cloudinary/url-gen/qualifiers/textStyle";
import { compass } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryImage("docs/row-boat-sea-mountains.jpg").overlay(
  source(text("Paradise", new TextStyle("Roboto", 400))).position(
    new Position()
      .gravity(compass("north"))
      .offsetY(0.05)
  )
);
```

```angular
import { source } from "@cloudinary/url-gen/actions/overlay";
import { text } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";
import { TextStyle } from "@cloudinary/url-gen/qualifiers/textStyle";
import { compass } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryImage("docs/row-boat-sea-mountains.jpg").overlay(
  source(text("Paradise", new TextStyle("Roboto", 400))).position(
    new Position()
      .gravity(compass("north"))
      .offsetY(0.05)
  )
);
```

```js
import { source } from "@cloudinary/url-gen/actions/overlay";
import { text } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";
import { TextStyle } from "@cloudinary/url-gen/qualifiers/textStyle";
import { compass } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryImage("docs/row-boat-sea-mountains.jpg").overlay(
  source(text("Paradise", new TextStyle("Roboto", 400))).position(
    new Position()
      .gravity(compass("north"))
      .offsetY(0.05)
  )
);
```

```python
CloudinaryImage("docs/row-boat-sea-mountains.jpg").image(transformation=[
  {'overlay': {'font_family': "Roboto", 'font_size': 400, 'text': "Paradise"}},
  {'flags': "layer_apply", 'gravity': "north", 'y': "0.05"}
  ])
```

```php
use Cloudinary\Transformation\Overlay;
use Cloudinary\Transformation\Source;
use Cloudinary\Transformation\Position;
use Cloudinary\Transformation\TextStyle;
use Cloudinary\Transformation\Gravity;
use Cloudinary\Transformation\Compass;

(new ImageTag('docs/row-boat-sea-mountains.jpg'))
	->overlay(Overlay::source(
	Source::text("Paradise",(new TextStyle("Roboto",400))))
	->position((new Position())
	->gravity(
	Gravity::compass(
	Compass::north()))
->offsetY(0.05))
	);
```

```java
cloudinary.url().transformation(new Transformation()
  .overlay(new TextLayer().fontFamily("Roboto").fontSize(400).text("Paradise")).chain()
  .flags("layer_apply").gravity("north").y(0.05)).imageTag("docs/row-boat-sea-mountains.jpg");
```

```ruby
cl_image_tag("docs/row-boat-sea-mountains.jpg", transformation: [
  {overlay: {font_family: "Roboto", font_size: 400, text: "Paradise"}},
  {flags: "layer_apply", gravity: "north", y: 0.05}
  ])
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Overlay(new TextLayer().FontFamily("Roboto").FontSize(400).Text("Paradise")).Chain()
  .Flags("layer_apply").Gravity("north").Y(0.05)).BuildImageTag("docs/row-boat-sea-mountains.jpg")
```

```dart
cloudinary.image('docs/row-boat-sea-mountains.jpg').transformation(Transformation()
	.addTransformation("l_text:Roboto_400:Paradise/fl_layer_apply,g_north,y_0.05"));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setOverlay("text:Roboto_400:Paradise").chain()
  .setFlags("layer_apply").setGravity("north").setY(0.05)).generate("docs/row-boat-sea-mountains.jpg")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation()
  .overlay(new TextLayer().fontFamily("Roboto").fontSize(400).text("Paradise")).chain()
  .flags("layer_apply").gravity("north").y(0.05)).generate("docs/row-boat-sea-mountains.jpg");
```

```flutter
cloudinary.image('docs/row-boat-sea-mountains.jpg').transformation(Transformation()
	.addTransformation("l_text:Roboto_400:Paradise/fl_layer_apply,g_north,y_0.05"));
```

```kotlin
cloudinary.image {
	publicId("docs/row-boat-sea-mountains.jpg")
	 overlay(Overlay.source(
	Source.text("Paradise",TextStyle("Roboto",400))) {
	 position(Position() {
	 gravity(
	Gravity.compass(
	Compass.north()))
 offsetY(0.05F) })
	 }) 
}.generate()
```

```jquery
$.cloudinary.image("docs/row-boat-sea-mountains.jpg", {transformation: [
  {overlay: new cloudinary.TextLayer().fontFamily("Roboto").fontSize(400).text("Paradise")},
  {flags: "layer_apply", gravity: "north", y: "0.05"}
  ]})
```

```react_native
import { source } from "@cloudinary/url-gen/actions/overlay";
import { text } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";
import { TextStyle } from "@cloudinary/url-gen/qualifiers/textStyle";
import { compass } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryImage("docs/row-boat-sea-mountains.jpg").overlay(
  source(text("Paradise", new TextStyle("Roboto", 400))).position(
    new Position()
      .gravity(compass("north"))
      .offsetY(0.05)
  )
);
```

![Text added to video using % offset](https://res.cloudinary.com/demo/video/upload/l_text:Roboto_400:Paradise/fl_layer_apply,g_north,y_0.05/paradise_location.mp4 "thumb: w_500")

```nodejs
cloudinary.video("paradise_location", {transformation: [
  {overlay: {font_family: "Roboto", font_size: 400, text: "Paradise"}},
  {flags: "layer_apply", gravity: "north", y: "0.05"}
  ]})
```

```react
import { source } from "@cloudinary/url-gen/actions/overlay";
import { text } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";
import { TextStyle } from "@cloudinary/url-gen/qualifiers/textStyle";
import { compass } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryVideo("paradise_location.mp4").overlay(
  source(text("Paradise", new TextStyle("Roboto", 400))).position(
    new Position()
      .gravity(compass("north"))
      .offsetY(0.05)
  )
);
```

```vue
import { source } from "@cloudinary/url-gen/actions/overlay";
import { text } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";
import { TextStyle } from "@cloudinary/url-gen/qualifiers/textStyle";
import { compass } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryVideo("paradise_location.mp4").overlay(
  source(text("Paradise", new TextStyle("Roboto", 400))).position(
    new Position()
      .gravity(compass("north"))
      .offsetY(0.05)
  )
);
```

```angular
import { source } from "@cloudinary/url-gen/actions/overlay";
import { text } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";
import { TextStyle } from "@cloudinary/url-gen/qualifiers/textStyle";
import { compass } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryVideo("paradise_location.mp4").overlay(
  source(text("Paradise", new TextStyle("Roboto", 400))).position(
    new Position()
      .gravity(compass("north"))
      .offsetY(0.05)
  )
);
```

```js
import { source } from "@cloudinary/url-gen/actions/overlay";
import { text } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";
import { TextStyle } from "@cloudinary/url-gen/qualifiers/textStyle";
import { compass } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryVideo("paradise_location.mp4").overlay(
  source(text("Paradise", new TextStyle("Roboto", 400))).position(
    new Position()
      .gravity(compass("north"))
      .offsetY(0.05)
  )
);
```

```python
CloudinaryVideo("paradise_location").video(transformation=[
  {'overlay': {'font_family': "Roboto", 'font_size': 400, 'text': "Paradise"}},
  {'flags': "layer_apply", 'gravity': "north", 'y': "0.05"}
  ])
```

```php
use Cloudinary\Transformation\Overlay;
use Cloudinary\Transformation\Source;
use Cloudinary\Transformation\Position;
use Cloudinary\Transformation\TextStyle;
use Cloudinary\Transformation\Gravity;
use Cloudinary\Transformation\Compass;

(new VideoTag('paradise_location.mp4'))
	->overlay(Overlay::source(
	Source::text("Paradise",(new TextStyle("Roboto",400))))
	->position((new Position())
	->gravity(
	Gravity::compass(
	Compass::north()))
->offsetY(0.05))
	);
```

```java
cloudinary.url().transformation(new Transformation()
  .overlay(new TextLayer().fontFamily("Roboto").fontSize(400).text("Paradise")).chain()
  .flags("layer_apply").gravity("north").y(0.05)).videoTag("paradise_location");
```

```ruby
cl_video_tag("paradise_location", transformation: [
  {overlay: {font_family: "Roboto", font_size: 400, text: "Paradise"}},
  {flags: "layer_apply", gravity: "north", y: 0.05}
  ])
```

```csharp
cloudinary.Api.UrlVideoUp.Transform(new Transformation()
  .Overlay(new TextLayer().FontFamily("Roboto").FontSize(400).Text("Paradise")).Chain()
  .Flags("layer_apply").Gravity("north").Y(0.05)).BuildVideoTag("paradise_location")
```

```dart
cloudinary.video('paradise_location.mp4').transformation(Transformation()
	.addTransformation("l_text:Roboto_400:Paradise/fl_layer_apply,g_north,y_0.05"));
```

```swift
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation()
  .setOverlay("text:Roboto_400:Paradise").chain()
  .setFlags("layer_apply").setGravity("north").setY(0.05)).generate("paradise_location.mp4")
```

```android
MediaManager.get().url().transformation(new Transformation()
  .overlay(new TextLayer().fontFamily("Roboto").fontSize(400).text("Paradise")).chain()
  .flags("layer_apply").gravity("north").y(0.05)).resourceType("video").generate("paradise_location.mp4");
```

```flutter
cloudinary.video('paradise_location.mp4').transformation(Transformation()
	.addTransformation("l_text:Roboto_400:Paradise/fl_layer_apply,g_north,y_0.05"));
```

```kotlin
cloudinary.video {
	publicId("paradise_location.mp4")
	 overlay(Overlay.source(
	Source.text("Paradise",TextStyle("Roboto",400))) {
	 position(Position() {
	 gravity(
	Gravity.compass(
	Compass.north()))
 offsetY(0.05F) })
	 }) 
}.generate()
```

```jquery
$.cloudinary.video("paradise_location", {transformation: [
  {overlay: new cloudinary.TextLayer().fontFamily("Roboto").fontSize(400).text("Paradise")},
  {flags: "layer_apply", gravity: "north", y: "0.05"}
  ]})
```

```react_native
import { source } from "@cloudinary/url-gen/actions/overlay";
import { text } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";
import { TextStyle } from "@cloudinary/url-gen/qualifiers/textStyle";
import { compass } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryVideo("paradise_location.mp4").overlay(
  source(text("Paradise", new TextStyle("Roboto", 400))).position(
    new Position()
      .gravity(compass("north"))
      .offsetY(0.05)
  )
);
```

The direction of x and y depends on the compass position:

Compass position | Positive x | Positive y | Negative x | Negative y
--|--|--|--|--
`center`, `north_west`, `north`, `west` | right | down | left | up
`north_east`, `east` | left | down | right | up
`south_east` | left | up | right | down
`south`, `south_west` | right | up | left | down

> **TIP**: See the [Positioning with Gravity
](https://cloudinary-training.github.io/cld-advanced-concepts/overlay-underlay/positioning-app/docs/index.html) interactive demo to experiment with gravity and coordinate parameters.
 
> **TIP**: By specifying positions that are outside the dimensions of the base image, you can [place images side by side or create collages](image_layer_collages).

## Overlays on special positions

The gravity parameter can also be set to a custom region within an image, which becomes the focus when placing the overlay. These 'special positions' are locations within the image that are either automatically detected by Cloudinary (e.g., a [face](face_detection_based_transformations#position_overlays_on_detected_faces)), [custom coordinates](custom_focus_areas#custom_coordinates) that were previously specified (e.g., as part of the [upload](image_upload_api_reference#upload) method), or detected by one of the Cloudinary add-ons (e.g., eyes or text within the image). 

For a full list of all the special positions available to use for placing overlays with the gravity parameter, see the [\<special position\>](transformation_reference#g_special_position) section in the _Transformation Reference_.

For example:

1. Add an overlay of the `purple-mask` image over all faces detected in the `couple-cornfield` image: 

    ![Image with overlay placed over faces](https://res.cloudinary.com/demo/image/upload/l_docs:purple-mask/c_scale,w_150/fl_layer_apply,g_faces/docs/couple-cornfield.jpg)

```nodejs
cloudinary.image("docs/couple-cornfield.jpg", {transformation: [
  {overlay: "docs:purple-mask"},
  {width: 150, crop: "scale"},
  {flags: "layer_apply", gravity: "faces"}
  ]})
```

```react
import { source } from "@cloudinary/url-gen/actions/overlay";
import { scale } from "@cloudinary/url-gen/actions/resize";
import { image } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";
import { focusOn } from "@cloudinary/url-gen/qualifiers/gravity";
import { faces } from "@cloudinary/url-gen/qualifiers/focusOn";

new CloudinaryImage("docs/couple-cornfield.jpg").overlay(
  source(
    image("docs/purple-mask").transformation(
      new Transformation().resize(scale().width(150))
    )
  ).position(new Position().gravity(focusOn(faces())))
);
```

```vue
import { source } from "@cloudinary/url-gen/actions/overlay";
import { scale } from "@cloudinary/url-gen/actions/resize";
import { image } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";
import { focusOn } from "@cloudinary/url-gen/qualifiers/gravity";
import { faces } from "@cloudinary/url-gen/qualifiers/focusOn";

new CloudinaryImage("docs/couple-cornfield.jpg").overlay(
  source(
    image("docs/purple-mask").transformation(
      new Transformation().resize(scale().width(150))
    )
  ).position(new Position().gravity(focusOn(faces())))
);
```

```angular
import { source } from "@cloudinary/url-gen/actions/overlay";
import { scale } from "@cloudinary/url-gen/actions/resize";
import { image } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";
import { focusOn } from "@cloudinary/url-gen/qualifiers/gravity";
import { faces } from "@cloudinary/url-gen/qualifiers/focusOn";

new CloudinaryImage("docs/couple-cornfield.jpg").overlay(
  source(
    image("docs/purple-mask").transformation(
      new Transformation().resize(scale().width(150))
    )
  ).position(new Position().gravity(focusOn(faces())))
);
```

```js
import { source } from "@cloudinary/url-gen/actions/overlay";
import { scale } from "@cloudinary/url-gen/actions/resize";
import { image } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";
import { focusOn } from "@cloudinary/url-gen/qualifiers/gravity";
import { faces } from "@cloudinary/url-gen/qualifiers/focusOn";

new CloudinaryImage("docs/couple-cornfield.jpg").overlay(
  source(
    image("docs/purple-mask").transformation(
      new Transformation().resize(scale().width(150))
    )
  ).position(new Position().gravity(focusOn(faces())))
);
```

```python
CloudinaryImage("docs/couple-cornfield.jpg").image(transformation=[
  {'overlay': "docs:purple-mask"},
  {'width': 150, 'crop': "scale"},
  {'flags': "layer_apply", 'gravity': "faces"}
  ])
```

```php
use Cloudinary\Transformation\Overlay;
use Cloudinary\Transformation\Resize;
use Cloudinary\Transformation\Source;
use Cloudinary\Transformation\Position;
use Cloudinary\Transformation\Gravity;
use Cloudinary\Transformation\FocusOn;

(new ImageTag('docs/couple-cornfield.jpg'))
	->overlay(Overlay::source(
	Source::image("docs/purple-mask")
	->transformation((new Transformation())
	->resize(Resize::scale()->width(150)))
	)
	->position((new Position())
	->gravity(
	Gravity::focusOn(
	FocusOn::faces()))
	)
	);
```

```java
cloudinary.url().transformation(new Transformation()
  .overlay(new Layer().publicId("docs:purple-mask")).chain()
  .width(150).crop("scale").chain()
  .flags("layer_apply").gravity("faces")).imageTag("docs/couple-cornfield.jpg");
```

```ruby
cl_image_tag("docs/couple-cornfield.jpg", transformation: [
  {overlay: "docs:purple-mask"},
  {width: 150, crop: "scale"},
  {flags: "layer_apply", gravity: "faces"}
  ])
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Overlay(new Layer().PublicId("docs:purple-mask")).Chain()
  .Width(150).Crop("scale").Chain()
  .Flags("layer_apply").Gravity("faces")).BuildImageTag("docs/couple-cornfield.jpg")
```

```dart
cloudinary.image('docs/couple-cornfield.jpg').transformation(Transformation()
	.overlay(Overlay.source(
	Source.image("docs/purple-mask")
	.transformation(new Transformation()
	.resize(Resize.scale().width(150)))
	)
	.position(Position()
	.gravity(
	Gravity.focusOn(
	FocusOn.faces()))
	)
	));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setOverlay("docs:purple-mask").chain()
  .setWidth(150).setCrop("scale").chain()
  .setFlags("layer_apply").setGravity("faces")).generate("docs/couple-cornfield.jpg")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation()
  .overlay(new Layer().publicId("docs:purple-mask")).chain()
  .width(150).crop("scale").chain()
  .flags("layer_apply").gravity("faces")).generate("docs/couple-cornfield.jpg");
```

```flutter
cloudinary.image('docs/couple-cornfield.jpg').transformation(Transformation()
	.overlay(Overlay.source(
	Source.image("docs/purple-mask")
	.transformation(new Transformation()
	.resize(Resize.scale().width(150)))
	)
	.position(Position()
	.gravity(
	Gravity.focusOn(
	FocusOn.faces()))
	)
	));
```

```kotlin
cloudinary.image {
	publicId("docs/couple-cornfield.jpg")
	 overlay(Overlay.source(
	Source.image("docs/purple-mask") {
	 transformation(Transformation {
	 resize(Resize.scale() { width(150) }) })
	 }) {
	 position(Position() {
	 gravity(
	Gravity.focusOn(
	FocusOn.faces()))
	 })
	 }) 
}.generate()
```

```jquery
$.cloudinary.image("docs/couple-cornfield.jpg", {transformation: [
  {overlay: new cloudinary.Layer().publicId("docs:purple-mask")},
  {width: 150, crop: "scale"},
  {flags: "layer_apply", gravity: "faces"}
  ]})
```

```react_native
import { source } from "@cloudinary/url-gen/actions/overlay";
import { scale } from "@cloudinary/url-gen/actions/resize";
import { image } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";
import { focusOn } from "@cloudinary/url-gen/qualifiers/gravity";
import { faces } from "@cloudinary/url-gen/qualifiers/focusOn";

new CloudinaryImage("docs/couple-cornfield.jpg").overlay(
  source(
    image("docs/purple-mask").transformation(
      new Transformation().resize(scale().width(150))
    )
  ).position(new Position().gravity(focusOn(faces())))
);
```

2. Use the [OCR Text Detection and Extraction](ocr_text_detection_and_extraction_addon) add-on to add an overlay with your site's contact information that covers any detected text in an uploaded image: 

    ![Image with overlay placed over faces](https://res.cloudinary.com/demo/image/upload/l_call_text/c_scale,fl_region_relative,w_1.0/fl_layer_apply,g_ocr_text/red_stop_sign.jpg)

```nodejs
cloudinary.image("red_stop_sign.jpg", {transformation: [
  {overlay: "call_text"},
  {flags: "region_relative", width: "1.0", crop: "scale"},
  {flags: "layer_apply", gravity: "ocr_text"}
  ]})
```

```react
import { source } from "@cloudinary/url-gen/actions/overlay";
import { scale } from "@cloudinary/url-gen/actions/resize";
import { image } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";
import { focusOn } from "@cloudinary/url-gen/qualifiers/gravity";
import { ocr } from "@cloudinary/url-gen/qualifiers/focusOn";

new CloudinaryImage("red_stop_sign.jpg").overlay(
  source(
    image("call_text").transformation(
      new Transformation().resize(scale().width("1.0").regionRelative())
    )
  ).position(new Position().gravity(focusOn(ocr())))
);
```

```vue
import { source } from "@cloudinary/url-gen/actions/overlay";
import { scale } from "@cloudinary/url-gen/actions/resize";
import { image } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";
import { focusOn } from "@cloudinary/url-gen/qualifiers/gravity";
import { ocr } from "@cloudinary/url-gen/qualifiers/focusOn";

new CloudinaryImage("red_stop_sign.jpg").overlay(
  source(
    image("call_text").transformation(
      new Transformation().resize(scale().width("1.0").regionRelative())
    )
  ).position(new Position().gravity(focusOn(ocr())))
);
```

```angular
import { source } from "@cloudinary/url-gen/actions/overlay";
import { scale } from "@cloudinary/url-gen/actions/resize";
import { image } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";
import { focusOn } from "@cloudinary/url-gen/qualifiers/gravity";
import { ocr } from "@cloudinary/url-gen/qualifiers/focusOn";

new CloudinaryImage("red_stop_sign.jpg").overlay(
  source(
    image("call_text").transformation(
      new Transformation().resize(scale().width("1.0").regionRelative())
    )
  ).position(new Position().gravity(focusOn(ocr())))
);
```

```js
import { source } from "@cloudinary/url-gen/actions/overlay";
import { scale } from "@cloudinary/url-gen/actions/resize";
import { image } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";
import { focusOn } from "@cloudinary/url-gen/qualifiers/gravity";
import { ocr } from "@cloudinary/url-gen/qualifiers/focusOn";

new CloudinaryImage("red_stop_sign.jpg").overlay(
  source(
    image("call_text").transformation(
      new Transformation().resize(scale().width("1.0").regionRelative())
    )
  ).position(new Position().gravity(focusOn(ocr())))
);
```

```python
CloudinaryImage("red_stop_sign.jpg").image(transformation=[
  {'overlay': "call_text"},
  {'flags': "region_relative", 'width': "1.0", 'crop': "scale"},
  {'flags': "layer_apply", 'gravity': "ocr_text"}
  ])
```

```php
use Cloudinary\Transformation\Overlay;
use Cloudinary\Transformation\Resize;
use Cloudinary\Transformation\Source;
use Cloudinary\Transformation\Position;
use Cloudinary\Transformation\Gravity;
use Cloudinary\Transformation\FocusOn;

(new ImageTag('red_stop_sign.jpg'))
	->overlay(Overlay::source(
	Source::image("call_text")
	->transformation((new Transformation())
	->resize(Resize::scale()->width(1.0)
	->regionRelative()
	))
	)
	->position((new Position())
	->gravity(
	Gravity::focusOn(
	FocusOn::ocr()))
	)
	);
```

```java
cloudinary.url().transformation(new Transformation()
  .overlay(new Layer().publicId("call_text")).chain()
  .flags("region_relative").width(1.0).crop("scale").chain()
  .flags("layer_apply").gravity("ocr_text")).imageTag("red_stop_sign.jpg");
```

```ruby
cl_image_tag("red_stop_sign.jpg", transformation: [
  {overlay: "call_text"},
  {flags: "region_relative", width: 1.0, crop: "scale"},
  {flags: "layer_apply", gravity: "ocr_text"}
  ])
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Overlay(new Layer().PublicId("call_text")).Chain()
  .Flags("region_relative").Width(1.0).Crop("scale").Chain()
  .Flags("layer_apply").Gravity("ocr_text")).BuildImageTag("red_stop_sign.jpg")
```

```dart
cloudinary.image('red_stop_sign.jpg').transformation(Transformation()
	.overlay(Overlay.source(
	Source.image("call_text")
	.transformation(new Transformation()
	.resize(Resize.scale().width('1.0')
	.regionRelative()
	))
	)
	.position(Position()
	.gravity(
	Gravity.focusOn(
	FocusOn.ocr()))
	)
	));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setOverlay("call_text").chain()
  .setFlags("region_relative").setWidth(1.0).setCrop("scale").chain()
  .setFlags("layer_apply").setGravity("ocr_text")).generate("red_stop_sign.jpg")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation()
  .overlay(new Layer().publicId("call_text")).chain()
  .flags("region_relative").width(1.0).crop("scale").chain()
  .flags("layer_apply").gravity("ocr_text")).generate("red_stop_sign.jpg");
```

```flutter
cloudinary.image('red_stop_sign.jpg').transformation(Transformation()
	.overlay(Overlay.source(
	Source.image("call_text")
	.transformation(new Transformation()
	.resize(Resize.scale().width('1.0')
	.regionRelative()
	))
	)
	.position(Position()
	.gravity(
	Gravity.focusOn(
	FocusOn.ocr()))
	)
	));
```

```kotlin
cloudinary.image {
	publicId("red_stop_sign.jpg")
	 overlay(Overlay.source(
	Source.image("call_text") {
	 transformation(Transformation {
	 resize(Resize.scale() { width(1.0F)
	 regionRelative()
	 }) })
	 }) {
	 position(Position() {
	 gravity(
	Gravity.focusOn(
	FocusOn.ocr()))
	 })
	 }) 
}.generate()
```

```jquery
$.cloudinary.image("red_stop_sign.jpg", {transformation: [
  {overlay: new cloudinary.Layer().publicId("call_text")},
  {flags: "region_relative", width: "1.0", crop: "scale"},
  {flags: "layer_apply", gravity: "ocr_text"}
  ]})
```

```react_native
import { source } from "@cloudinary/url-gen/actions/overlay";
import { scale } from "@cloudinary/url-gen/actions/resize";
import { image } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";
import { focusOn } from "@cloudinary/url-gen/qualifiers/gravity";
import { ocr } from "@cloudinary/url-gen/qualifiers/focusOn";

new CloudinaryImage("red_stop_sign.jpg").overlay(
  source(
    image("call_text").transformation(
      new Transformation().resize(scale().width("1.0").regionRelative())
    )
  ).position(new Position().gravity(focusOn(ocr())))
);
```

You may also want to position an overlay ensuring that it avoids a special position. See [Position overlays avoiding detected faces](face_detection_based_transformations#position_overlays_avoiding_detected_faces) for an example of how to achieve this.

> **NOTES**:
>
> * When gravity is set to one of the special position values, and no special position is detected in the image, then no overlay is placed at all.

> * Instead of specifying an absolute width for overlays, you can use the [fl_region_relative](#sizing_relative_to_the_detected_region) flag to place each overlay relative to the size of each detected region.

> **TIP**: Instead of adding your layer image to a single, specific location, you can tile your layer image over the entire base image. This is often useful when using image layers for [watermarking](image_layer_watermarking#watermarking).   

## Layer overflow behavior

By default, if a layer (image or text) has a larger width or height than the base image, the delivered image canvas is resized to display the entire layer. If you want to ensure that the delivered size will never be larger than the base image, you can use the `fl_no_overflow` flag in the same component as the `layer_apply` flag.

For example, the `no_overflow` flag prevents the logo overlay from extending the canvas of the base image (`c_scale,w_400/l_cloudinary_icon_blue/fl_layer_apply,fl_no_overflow`):

![Prevent an overlay from extending the canvas of the base image](https://res.cloudinary.com/demo/image/upload/c_scale,w_400/l_cloudinary_icon_blue/fl_layer_apply,fl_no_overflow/piano.jpg "thumb: w_400")

```nodejs
cloudinary.image("piano.jpg", {transformation: [
  {width: 400, crop: "scale"},
  {overlay: "cloudinary_icon_blue"},
  {flags: ["layer_apply", "no_overflow"]}
  ]})
```

```react
import { scale } from "@cloudinary/url-gen/actions/resize";
import { source } from "@cloudinary/url-gen/actions/overlay";
import { image } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";

new CloudinaryImage("piano.jpg")
  .resize(scale().width(400))
  .overlay(
    source(image("cloudinary_icon_blue")).position(
      new Position().allowOverflow(false)
    )
  );
```

```vue
import { scale } from "@cloudinary/url-gen/actions/resize";
import { source } from "@cloudinary/url-gen/actions/overlay";
import { image } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";

new CloudinaryImage("piano.jpg")
  .resize(scale().width(400))
  .overlay(
    source(image("cloudinary_icon_blue")).position(
      new Position().allowOverflow(false)
    )
  );
```

```angular
import { scale } from "@cloudinary/url-gen/actions/resize";
import { source } from "@cloudinary/url-gen/actions/overlay";
import { image } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";

new CloudinaryImage("piano.jpg")
  .resize(scale().width(400))
  .overlay(
    source(image("cloudinary_icon_blue")).position(
      new Position().allowOverflow(false)
    )
  );
```

```js
import { scale } from "@cloudinary/url-gen/actions/resize";
import { source } from "@cloudinary/url-gen/actions/overlay";
import { image } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";

new CloudinaryImage("piano.jpg")
  .resize(scale().width(400))
  .overlay(
    source(image("cloudinary_icon_blue")).position(
      new Position().allowOverflow(false)
    )
  );
```

```python
CloudinaryImage("piano.jpg").image(transformation=[
  {'width': 400, 'crop': "scale"},
  {'overlay': "cloudinary_icon_blue"},
  {'flags': ["layer_apply", "no_overflow"]}
  ])
```

```php
use Cloudinary\Transformation\Resize;
use Cloudinary\Transformation\Overlay;
use Cloudinary\Transformation\Source;
use Cloudinary\Transformation\Position;

(new ImageTag('piano.jpg'))
	->resize(Resize::scale()->width(400))
	->overlay(Overlay::source(
	Source::image("cloudinary_icon_blue"))
	->position((new Position())->allowOverflow(false))
	);
```

```java
cloudinary.url().transformation(new Transformation()
  .width(400).crop("scale").chain()
  .overlay(new Layer().publicId("cloudinary_icon_blue")).chain()
  .flags("layer_apply", "no_overflow")).imageTag("piano.jpg");
```

```ruby
cl_image_tag("piano.jpg", transformation: [
  {width: 400, crop: "scale"},
  {overlay: "cloudinary_icon_blue"},
  {flags: ["layer_apply", "no_overflow"]}
  ])
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Width(400).Crop("scale").Chain()
  .Overlay(new Layer().PublicId("cloudinary_icon_blue")).Chain()
  .Flags("layer_apply", "no_overflow")).BuildImageTag("piano.jpg")
```

```dart
cloudinary.image('piano.jpg').transformation(Transformation()
	.resize(Resize.scale().width(400))
	.overlay(Overlay.source(
	Source.image("cloudinary_icon_blue"))
	.position(Position().allowOverflow(false))
	));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setWidth(400).setCrop("scale").chain()
  .setOverlay("cloudinary_icon_blue").chain()
  .setFlags("layer_apply", "no_overflow")).generate("piano.jpg")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation()
  .width(400).crop("scale").chain()
  .overlay(new Layer().publicId("cloudinary_icon_blue")).chain()
  .flags("layer_apply", "no_overflow")).generate("piano.jpg");
```

```flutter
cloudinary.image('piano.jpg').transformation(Transformation()
	.resize(Resize.scale().width(400))
	.overlay(Overlay.source(
	Source.image("cloudinary_icon_blue"))
	.position(Position().allowOverflow(false))
	));
```

```kotlin
cloudinary.image {
	publicId("piano.jpg")
	 resize(Resize.scale() { width(400) })
	 overlay(Overlay.source(
	Source.image("cloudinary_icon_blue")) {
	 position(Position() { allowOverflow(false) })
	 }) 
}.generate()
```

```jquery
$.cloudinary.image("piano.jpg", {transformation: [
  {width: 400, crop: "scale"},
  {overlay: new cloudinary.Layer().publicId("cloudinary_icon_blue")},
  {flags: ["layer_apply", "no_overflow"]}
  ]})
```

```react_native
import { scale } from "@cloudinary/url-gen/actions/resize";
import { source } from "@cloudinary/url-gen/actions/overlay";
import { image } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";

new CloudinaryImage("piano.jpg")
  .resize(scale().width(400))
  .overlay(
    source(image("cloudinary_icon_blue")).position(
      new Position().allowOverflow(false)
    )
  );
```

> **READING**:
>
> * [Layer syntax](layers): Learn the layer URL syntax and overlay types for images.

> * [Text layer options](image_text_layers): Text styling, color, multi-line text, and special characters.

> * [Transforming layers](image_layer_transformations): Apply transformations, multiple overlays, and relative sizing to layers.

> * [Underlays, watermarking, and special effects](image_layer_watermarking): Image underlays, watermarking, tiling, and special layer applications.