Skip to content
English - United States
Nous Contacter
  • There are no suggestions because the search field is empty.

How to replace a background image on your hotel website

Update a background image without breaking the layout

Key points • Identify whether the image is a background or a regular image • Change the background from the Editor if the area is allowed • Use the Designer for locked or complex sections • Check the mobile display and cover/position settings

The background image plays a crucial role in the visual atmosphere of a hotel website. It enhances your rooms, restaurant, or wellness areas and helps convey the overall experience of your establishment. Replacing this background is simple, but requires a few steps to ensure a clean and responsive result.

Here's how to do it effectively.

Check if the image can be edited in the Editor.

Some sections allow you to modify the background directly from the Editor. To check:

  1. Open your published website.
  2. Click on Login to access the Editor.
  3. Hover over the section containing the background.
  4. If the Edit button appears, editing is permitted.
  5. Click on it and then look for a visual option or an associated image.

In this case, you will be able to: • Replace the image • Modify the associated text • Update any links or overlays

💡 Not all backgrounds are accessible from the Editor, especially if they are part of the overall site structure.

Replace the background image via the Designer (most common method)

For most sections (homepage hero, banners, visual blocks), the modification is done in the Designer.

Procedure :

  1. Open the Designer.
  2. Select the section or block containing the background.
  3. In the Style panel, locate the Background area.
  4. Click on the current image.
  5. Upload your new photo or select one from your library.
  6. Check the following settings: • Image setting: cover for full-screen rendering • Position: center center for balanced framing • Repeat: off to avoid repetition
  7. Publish the website.

💡 Opt for a wide landscape image (1600–2000 px) to ensure optimal quality, especially on a large screen.

Check the mobile and tablet display

A background image can display very differently depending on the device: • Automatic vertical cropping • Excessive zoom • Unpredictable cropping depending on the height • Unreadable text if there is insufficient contrast

After replacement: • Test on mobile, tablet and desktop • Check the image framing • If necessary, adjust the vertical position (center top, center bottom)

💡 Some sections have a mobile-specific background image. Check if a separate version is configured.

Optimize the image before importing

For premium rendering and fast loading: • Use the WebP format if possible • Recommended file size: less than 300–400 KB • Recommended width: 1600–2000 px • Avoid images that are too dark or too bright if text appears on top of them • Add a slight dark overlay if necessary to ensure readability

If the background does not change after modification

Several possible causes: • The element uses a shared global style • The image is set on a parent element (section, div, container) and not the selected element • A different mobile version is active • An interaction or animation is replacing the background • You have not published the update

Solution: • Check each level of the hierarchy • Refresh in private browsing mode • Confirm that you are editing the correct page and section

Conclusion

Replacing a background image on your hotel website is simple once you know whether the section can be edited from the Editor or requires intervention via the Designer. By optimizing your image, checking for responsiveness, and adjusting the cover and position settings, you guarantee a stylish and professional presentation for every visitor.