# Banner 1

### Banner 1

> Module position: tp-blog1
>
> Module class suffix: custom-img

![](https://299314993-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrD6zkkWwg4W3S7sFogkq%2Fuploads%2FGpyCgtC0fe0sS4nynwdN%2FBanner1.png?alt=media\&token=3d7af36b-4dbd-451b-ad10-1759f642c4b0)

If you want to display your banner image like this you have to create a custom module and publish the custom module like below

#### Step-1:

![](https://299314993-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrD6zkkWwg4W3S7sFogkq%2Fuploads%2FShbCLxNWgOVN8ZDeTCqn%2FUnite_Revolution_Slider2_step1.png?alt=media\&token=4ffd1eb7-44b9-4859-b1c9-8c69da7157c6)

#### Step-2:

![](https://299314993-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrD6zkkWwg4W3S7sFogkq%2Fuploads%2F0K1SDtHKLuvGTUbJFnCF%2Fsocial_share_step2.png?alt=media\&token=5bad5c42-f035-4014-82aa-425b3226d528)

#### Step-3:

![](https://299314993-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrD6zkkWwg4W3S7sFogkq%2Fuploads%2FBAOFcL9hl4aS3hUaeWMu%2FBanner1_step1.png?alt=media\&token=7afd2a9c-9211-4750-bce2-1e39dbd80f9c)

#### Step-4:

Add the following code in your custom module

```html
<div class="block-left">
    <div class="block-left-top">
        <div class="text-overlay">
            <figure><img src="images/themeparrot/bannars/banner.jpg" alt="banner" class="img-responsive" /></figure>
            <a href="#" class="text-overlay-caption black left"><span> New Book Sales </span> <br /><span>Get new books for half of the price</span> <br /> View more </a></div>
    </div>
</div>
```