--- title: How to Change a Background Image slug: how-to-change-a-background-image docTags: createdAt: 2025-06-16T17:14:53.929Z --- ## Introduction Background (hero) images are often the first visual element a visitor sees. Updating this image keeps your website looking current, branded, and engaging. Replacing or updating images in the Storagely Website CMS  is easy.  ## Navigating to the Editor - Open your Storagely Dashboard. - Navigate to the Storage Website tab and select "My Websites" ::Image[]{src="https://api.archbee.com/api/optimize/_fbQ1jk8y-6t-s-DYY8Bo/a_vbokmc20-DnECIMXYlD_screenshot-2025-06-27-at-85431-am.png" size="38" width="388" height="559" position="flex-start" darkWidth="388" darkHeight="559" showCaption="false"} - Select the website you want to edit from the list ![](https://api.archbee.com/api/optimize/_fbQ1jk8y-6t-s-DYY8Bo/uaZq1w42uNsUr6u3KAqoI_screenshot-2025-06-27-at-93722-am.png) - Click the top left **CMS** icon ::Image[]{src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXf4j45XiRtVZTpVDOGqnd5eTRfUWgHtG0ap1l0mWCIvOt92DTp8qLrEgZz4HUN3otNt4c0OCvvGVxfOCGFXohqRtm5gf-e2U9JhgT46b9WIOefP3ex3xysKC1NEiIOQpMeSQTo65UADXpigU276ptE?key=SJqjgkT2K-F-F71wGPZjBw" size="10" width="96" height="112" position="flex-start" darkWidth="96" darkHeight="112" showCaption="false"} - Click the page containing the details you’d like to update. ![](https://api.archbee.com/api/optimize/_fbQ1jk8y-6t-s-DYY8Bo/mhmRpK6q7K8ZkFwcu-if6_screenshot-2025-06-27-at-111805-am.png) - **Scroll** to the **Hero section** on the page preview. **Step-by-step instructions to change a background image (hero section):** 1. **Hover** over the image block you want to change. 2. **Click **on the **black circle** in the top right corner. ::Image[]{src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXd9Ed8PoDnLGNfi5vou_QohmGlTLaigl4ZRULlvrsHbDCD7UDkbIXO51SP2mONfYORpCgIiA1yBqi3LInJTZR9TSq6rM5US5F3VkEShX0vA25WOaXIFnoCfTo8Mv3dAgMvYk4tY-iM1aEvxebYgEl0?key=SJqjgkT2K-F-F71wGPZjBw" size="10" width="120" height="148" position="flex-start" darkWidth="120" darkHeight="148" showCaption="false"} 3. Click on the **Background **icon ::Image[]{src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXfdwlxoXLzlmImDJZKBzTThm5J20O_lqRzm65o2NlRFRDrQjen7-bJsU0tKupgECCbR55vS9qqw-nPtrSCVj3UKgpnGiZc8QpkfDjmekWskoqn6xMwHqVKwmSUFUjXKaVMgUEMINN5uWdReb-awPQ?key=SJqjgkT2K-F-F71wGPZjBw" size="46" width="750" height="128" position="flex-start" darkWidth="750" darkHeight="128" showCaption="false"} 4. **Click** the "X" to remove the image ::Image[]{src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXcxj-H9Sc1h5Wmazbmn9BzZp0KVftiMZERL_057sYlakCX8TJnEIlguGGd982Eop78XufR9lP4Z-d9-xO4jO7gqwsZN8wnl7KWmSvh-pbA5Kwo_jJpb6abdTCqw9OcVOf626he3w-IG9dVpZbJj1yc?key=SJqjgkT2K-F-F71wGPZjBw" size="32" width="522" height="592" position="flex-start" darkWidth="522" darkHeight="592" showCaption="false"} 5. Click the **Upload** icon and then the **Add** icon to upload your new image. ::Image[]{src="https://api.archbee.com/api/optimize/_fbQ1jk8y-6t-s-DYY8Bo/nj1rxWswRmwpd7thtoKjZ_screenshot-2025-06-26-at-30046-pm.png" size="74" width="852" height="474" position="flex-start" darkWidth="852" darkHeight="474" showCaption="false"} 6. Review the changes made in all 3 device types (**Desktop, tablet, mobile**) to ensure they look correct. ::Image[]{src="https://api.archbee.com/api/optimize/_fbQ1jk8y-6t-s-DYY8Bo/hh2OkLSjHiC-BmyZwVS_p_screenshot-2025-06-26-at-30210-pm.png" size="28" width="355" height="818" position="flex-start" darkWidth="355" darkHeight="818" showCaption="false"} 7. To save the **update**, select “**Update**” in the bottom right corner of the window. Then close the tab. ::Image[]{src="https://api.archbee.com/api/optimize/_fbQ1jk8y-6t-s-DYY8Bo/V6UVZwSAfaFb0EblaLFC1_screenshot-2025-06-26-at-30519-pm.png" size="68" width="666" height="422" position="flex-start" darkWidth="666" darkHeight="422" showCaption="false"} ### ✅ Best Practices for Background Images - ✅ **Use high-res, optimized images (\<200KB)** Keep images sharp but lightweight. Use compressed formats like WebP or JPEG to maintain fast load times. - Use tools like Online-Convert to formate images. [Here is a link to use.](https://image.online-convert.com/convert-to-webp) - ✅ **Adjust overlay color and opacity for readability** Apply a semi-transparent overlay to ensure text stands out clearly against the background image. - ✅ **Preview on all devices** Use the preview toggle in Storagely to check how your image looks on desktop, tablet, and mobile. Crop and alignment may vary. - ✅ **Name image files with SEO keywords** Rename files before uploading using relevant keywords (e.g., climate-controlled-storage.jpg). Use hyphens instead of spaces to improve search visibility. 🎥 Watch Tutorial Video of this process: :::Iframe{iframeHeight="0" code=""} ::: *As always, if you have any questions during this process, our Customer Success Team is here to help. The best way to reach us is by submitting a support ticket.* **[Submit a Ticket](https://d1s7s.share.hsforms.com/297GkKIsiTSmDgSKUYT9s2g)**