---
title: Creating a hero image
description: Follow these instructions on how to properly create a hero image.
---
[Skip to content](https://knowledgebase.jhspecialty.com/creating-a-hero-image#main-content)
English
Show submenu for translations
[More support](https://knowledgebase.jhspecialty.com/kb-tickets/new?hsLang=en)
- [Tickets](https://knowledgebase.jhspecialty.com/tickets-view)
- [Sign out](https://knowledgebase.jhspecialty.com/_hcms/mem/logout)
Open main navigation
Close main navigation
- [Tickets](https://knowledgebase.jhspecialty.com/tickets-view)
- [Sign out](https://knowledgebase.jhspecialty.com/_hcms/mem/logout)
- English
Show submenu for translations
- [More support](https://knowledgebase.jhspecialty.com/kb-tickets/new)
- Contact us
Contact us
How can we help you?
- There are no suggestions because the search field is empty.
1. [MOCE & oDash Knowledge Base](https://knowledgebase.jhspecialty.com/?hsLang=en)
2. [MOCE - Editing](https://knowledgebase.jhspecialty.com/moce-editing?hsLang=en)
3. [Blurbs - Editing ( Standard +)](https://knowledgebase.jhspecialty.com/moce-editing?hsLang=en#blurbs-editing-standard)
# Creating a hero image
## Follow these instructions on how to properly create a hero image.
Issue: My hero image is being cut off when I view it on different desktop/mobile screen sizes.
Solution:
The hero image section should be thought of as a background image. Similar to the other background images on every section of the homepage, when the screen size gets smaller, the background image will get cut off.
To help combat the issue of images being cut off, there are two image upload options for the hero section: a desktop background image and a mobile background image. The desktop background image will appear on screen widths \>640px, while the mobile background image will appear on screen widths \<640px.
In this particular scenario with the “Christmas Sale” text, you’ll want to make sure the text is as close to the center of the image as possible to ensure it appears on a variety of screen sizes. In the image below, the area highlighted in red would be the area seen by most screen sizes.
Keep in mind that there is also a title, subtitle, and button that overlays the image, so the area highlighted in blue is the “sweet spot” for ensuring content will appear on almost all screen sizes. I recommend moving the most important content to this area in blue.
- [MOCE - Editing](https://knowledgebase.jhspecialty.com/moce-editing?hsLang=en#main-content)
- [Sales Order Module](https://knowledgebase.jhspecialty.com/moce-editing?hsLang=en#sales-order-module)
- [Galleries - Create, Edit and Maintain](https://knowledgebase.jhspecialty.com/moce-editing?hsLang=en#galleries-create-edit-and-maintain)
- [Contact Us](https://knowledgebase.jhspecialty.com/moce-editing?hsLang=en#contact-us)
- [Member & User Modules](https://knowledgebase.jhspecialty.com/moce-editing?hsLang=en#member-user-modules)
- [Logging into your MOCE Admin](https://knowledgebase.jhspecialty.com/moce-editing?hsLang=en#logging-into-your-moce-admin)
- [Pages - Create and Edit ( Standard + )](https://knowledgebase.jhspecialty.com/moce-editing?hsLang=en#pages-create-and-edit-standard)
- [FAQ - ( Standard + )](https://knowledgebase.jhspecialty.com/moce-editing?hsLang=en#faq-standard)
- [Directory Listing](https://knowledgebase.jhspecialty.com/moce-editing?hsLang=en#directory-listing)
- [Blurbs - Editing ( Standard +)](https://knowledgebase.jhspecialty.com/moce-editing?hsLang=en#blurbs-editing-standard)
- [Store Locations - Editing and Adding](https://knowledgebase.jhspecialty.com/moce-editing?hsLang=en#store-locations-editing-and-adding)
- [Employment - Create, Edit, & Maintain](https://knowledgebase.jhspecialty.com/moce-editing?hsLang=en#employment-create-edit-maintain)
- [Menu (Navigation - Footer & Header)](https://knowledgebase.jhspecialty.com/moce-editing?hsLang=en#menu-navigation-footer-header)
- [Resources - Create, Edit, & Maintain](https://knowledgebase.jhspecialty.com/moce-editing?hsLang=en#resources-create-edit-maintain)
- [ōDash](https://knowledgebase.jhspecialty.com/%C5%8Ddash?hsLang=en#main-content)
- [How To Video Series](https://knowledgebase.jhspecialty.com/%C5%8Ddash?hsLang=en#how-to-video-series)
- [Internal Use](https://knowledgebase.jhspecialty.com/%C5%8Ddash?hsLang=en#internal-use)
- [FAQ](https://knowledgebase.jhspecialty.com/%C5%8Ddash?hsLang=en#faq)
- [ōDash FAQ](https://knowledgebase.jhspecialty.com/%C5%8Ddash-faq?hsLang=en#main-content)
- [Email](https://knowledgebase.jhspecialty.com/%C5%8Ddash-faq?hsLang=en#email)
- [Ship-to-Store Information](https://knowledgebase.jhspecialty.com/ship-to-store-information?hsLang=en)
- [Let Us Help](https://knowledgebase.jhspecialty.com/let-us-help?hsLang=en)
- [Login to MOCE](https://knowledgebase.jhspecialty.com/login-to-moce?hsLang=en)
- [MOCE - Popular Topics](https://knowledgebase.jhspecialty.com/moce-popular-topics?hsLang=en)
- [MOCE - Release Notes](https://knowledgebase.jhspecialty.com/moce-release-notes?hsLang=en)
- [Do it Best Internal](https://knowledgebase.jhspecialty.com/do-it-best-internal?hsLang=en)
- [JH Program Mgrs](https://knowledgebase.jhspecialty.com/jh-program-mgrs?hsLang=en)
- [Update Promotions & Pricing](https://knowledgebase.jhspecialty.com/update-promotions-pricing?hsLang=en)
- [Reports](https://knowledgebase.jhspecialty.com/reports?hsLang=en)
- [MOCE Subscription](https://knowledgebase.jhspecialty.com/moce-subscription?hsLang=en)
- [Pick N Pack Mobile App](https://knowledgebase.jhspecialty.com/pick-n-pack-mobile-app?hsLang=en)
- [MOCE Professional Plan Resources](https://knowledgebase.jhspecialty.com/moce-professional-plan-resources?hsLang=en#main-content)
- [General Knowledge](https://knowledgebase.jhspecialty.com/moce-professional-plan-resources?hsLang=en#general-knowledge)
- [Custom Products](https://knowledgebase.jhspecialty.com/moce-professional-plan-resources?hsLang=en#custom-products)
- [BOPIS Articles](https://knowledgebase.jhspecialty.com/moce-professional-plan-resources?hsLang=en#bopis-articles)
- [Training](https://knowledgebase.jhspecialty.com/moce-professional-plan-resources?hsLang=en#training)
- [ECi POS](https://knowledgebase.jhspecialty.com/moce-professional-plan-resources?hsLang=en#eci-pos)
- [Epicor POS](https://knowledgebase.jhspecialty.com/moce-professional-plan-resources?hsLang=en#epicor-pos)
- [TransAct POS](https://knowledgebase.jhspecialty.com/moce-professional-plan-resources?hsLang=en#transact-pos)
- [New Features](https://knowledgebase.jhspecialty.com/new-features?hsLang=en)
- [MOCE - Onboarding](https://knowledgebase.jhspecialty.com/moce-onboarding?hsLang=en)
- [oDash New Features](https://knowledgebase.jhspecialty.com/odash-new-features?hsLang=en)
- [MOCE Information](https://knowledgebase.jhspecialty.com/moce-information?hsLang=en#main-content)
- [Brand Pages](https://knowledgebase.jhspecialty.com/moce-information?hsLang=en#brand-pages)
- [MOCE Updates](https://knowledgebase.jhspecialty.com/moce-updates?hsLang=en)
- [Solutions to Scale](https://knowledgebase.jhspecialty.com/solutions-to-scale?hsLang=en)
- [Internal](https://knowledgebase.jhspecialty.com/internal?hsLang=en)
- [MOCE Knowledgebase](https://jhspecialty-2745682.hs-sites.com/blog)
[](http://jhspecialty.com)
[mailto:email@email.com](mailto:email@email.com)
Copyright © 2026, JH Specialty, Inc.