top of page

How to Update your Wix Editor Banner Image for the New Season

Get your website ready for the new season by updating your Home page banner image. Banners are an essential part of any website, as they set the tone and first impression for visitors. Whether you're showcasing a new product, promoting an upcoming event, or simply highlighting your brand, having an eye-catching banner is crucial.

Entrepreneur working in a small business cafe on her Wix Editor website.

This blog post will guide you through changing the banner image of your Wix Editor website, from a Legend Wix Partner. You can also shop this service by having us update your banner image on your Wix Editor site for you.

Choosing the Right Banner Image

Before diving into the technical aspects, it's important to choose the right banner image. Here are a few things to consider:

  • Image size: Choose a horizontal photo that hasn't been cropped for your banner. The ideal size is 1920px x 550px or larger to ensure it fits the banner area without stretching or pixilation. While some devices may display the entire image, only about a third will be visible across all devices due to responsive design. Therefore, position the main focus of your photo within the central third, left third or right third of the image to ensure it remains prominent across all devices.

  • Image resolution: Use a high-resolution image to ensure it looks sharp and clear on all devices.

  • Image format: Save your image in a web-friendly format, such as JPEG or PNG.

  • Image content: Choose an image that is relevant to your brand and message, and that will grab the attention of visitors.

Changing the Banner Image on Wix Editor

Once you've chosen your image, follow these steps to change the banner image on your Wix Editor website:

Click All Sites in the Wix Dashboard to access the site you will be editing

1. Go to the Editor 

Log in to your Wix account and open the website you want to edit by navigating to All Sites and selecting your site.

How to access editing mode from the Wix Editor dashboard

Click Edit Site to access editing mode.

How to navigate to different website pages in Wix Editor

3. Go to the page with the banner

Select the page of your site that you will be working on by using the Page navigation in the upper left corner.

How to change a banner image in a Strip in Wix Editor

4. Click on the banner image

Select the banner image you want to change, so that a set of options populates. A blue parameter will appear around your image when it has been selected. Click the Change Strip Background option.

How to change a banner image in Wix Editor

Click Image to access the ability to upload your own image or choose from free stock photo options from Wix or Unsplash. Shutterstock is also available to use stock photos for a fee.

How to upload and add stock photos in Wix Editor.

5. Select your new image

You can choose from your uploaded images, Wix library images, or stock photos.

6. Edit and adjust the image

Tint your image opacity to help any overlayed text to be clearly visible for accessibility purposes by clicking on the banner image > Change Strip Background > Settings. This will allow you to update the color of the tint and darken or lighten the photo as needed by altering the Image opacity and Color behind the image.

If you notice your image is cut off after you have added it, it can be updated by clicking to refocus the image under Where is it positioned?

How to update website responsiveness in Wix Editor by aligning your image with the Strip Layout.

Update the responsiveness of the image to align content to either the Left, Center or Right by clicking on the banner image to select Strip Layout. In this example the Strip layout is set to still be Centered. If the main focus of your image is on the left of the photo, align left and stay to the left of the gridline with all content such as text and buttons so that they can always be seen on all devices.

Updating alt text on a banner image in Wix Editor

7. Settings

Click the banner image Change Background Strip > Settings. Scroll down to add alt text using keywords for accesssibility and SEO.

How to access the mobile editor and hidden content in Wix Editor

8. Update mobile view after finishing on desktop