# Header image module (picture included)

**URL:** <https://community.hubspot.com/t/header-image-module-picture-included/16432>\
**Category:** CMS Development\
**Tags:** design-manager\
**Created:** [September 26, 2019, 8:24am UTC](https://community.hubspot.com/t/header-image-module-picture-included/16432 "2019-09-26T08:24:33Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Kihulane](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/kihulane/32/52876_2.png) [@Kihulane](https://community.hubspot.com/u/Kihulane)\
**Post date:** [September 26, 2019, 8:24am UTC](https://community.hubspot.com/t/header-image-module-picture-included/16432/1 "2019-09-26T08:24:33Z")

</div>

I have a question about creating a custom module.  
I need to create a “Header image” module that lets the content creator choose which kind of image he/she wants to display in the blog post. I want to use specific template on each option (narrow, wide, superwide) but right now Hubspot only let’s me use one template on all of the blog posts.

Something like this:

 ![image (1).png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/9/8/98e424f83181f095874a8b0156effe786951c36e.png)

Any suggestions if this is even possible?

---

<div class="post-metadata">

**Author:** ![Stephanie-OG](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/stephanie-og/32/73267_2.png) [@Stephanie-OG](https://community.hubspot.com/u/Stephanie-OG)\
**Post date:** [September 26, 2019, 3:10pm UTC](https://community.hubspot.com/t/header-image-module-picture-included/16432/2 "2019-09-26T15:10:47Z")

</div>

Is that the new landing page drag-and-drop editor? Unfortunately I haven’t had the chance to work with it yet but if it’s similar to the email one _I don’t think_ you can add in custom modules at the moment.

If you’re working with regular templates, you can create a custom module that sets a background image. I usually create something [like this](https://www.stephanieogaygarcia.com/hubspot-cms-development/add-an-editable-background-image-to-your-hubspot-template-or-page) that can be added anywhere but you could also create a module that also sets the content.

* * *

**Stephanie O’Gay Garcia**

HubSpot CMS Design & Development

[Website](http://www.stephanieogaygarcia.com?utm_source=HubSpotCommunity) | [Contact](http://www.stephanieogaygarcia.com/contact?utm_source=HubSpotCommunity)

_If this helped, please mark it as the solution to your question, thanks!_

---

<div class="post-metadata">

**Author:** ![Kihulane](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/kihulane/32/52876_2.png) [@Kihulane](https://community.hubspot.com/u/Kihulane)\
**Post date:** [December 5, 2019, 9:59am UTC](https://community.hubspot.com/t/header-image-module-picture-included/16432/3 "2019-12-05T09:59:49Z")

</div>

Hi Stephanie,

First of all thank you for answering my question and sorry for replying you so late.

I followed through the tutorial you linked me and created a custom module which has all the “background image” features enabled. I’m not sure if you can help me with this but I have a problem using this module. It doesn’t show up in my blog post editor view.

The module is added in the design tools template:

 ![Screenshot 2019-12-05 at 11.53.58.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/7/b/7b121a8e445b2ba5d820be13fbeae36192e4d3cf.png)

And it’s showing up in my blog post editor view with the editable options for background image:

 ![Screenshot 2019-12-05 at 11.56.30.jpg](https://d2qpr2jzcazej7.cloudfront.net/original/3X/c/c/cc6cc796bcb4fb15add8cfb102db843d763ca438.jpeg)

The problem: **It’s not displaying anything.**  
Do you know any solution why my custom module is not displaying anything in the post view?

---

<div class="post-metadata">

**Author:** ![Stephanie-OG](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/stephanie-og/32/73267_2.png) [@Stephanie-OG](https://community.hubspot.com/u/Stephanie-OG)\
**Post date:** [December 5, 2019, 8:36pm UTC](https://community.hubspot.com/t/header-image-module-picture-included/16432/4 "2019-12-05T20:36:37Z")

</div>

The height of the background image will adjust to the content within the container. So if you were to add any content module (e.g. a Rich Text module) to that “Homepage Hero” container (just below the background image module), it should show up behind the content.

If that’s still not working, could you please send me a link or preview link to the page?

* * *

**Stephanie O’Gay Garcia**

HubSpot CMS Design & Development

[Website](http://www.stephanieogaygarcia.com?utm_source=HubSpotCommunity) | [Contact](http://www.stephanieogaygarcia.com/contact?utm_source=HubSpotCommunity)

---

<div class="post-metadata">

**Author:** ![Kihulane](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/kihulane/32/52876_2.png) [@Kihulane](https://community.hubspot.com/u/Kihulane)\
**Post date:** [December 9, 2019, 9:24am UTC](https://community.hubspot.com/t/header-image-module-picture-included/16432/5 "2019-12-09T09:24:16Z")

</div>

Thank you! I can see the image now.
