Ideal Wix Background Size
Updated: Apr 19, 2020
Last edited: 3/21/20
When you're building a site for your business it's important that your design matches the quality of your brand.
So when your Wix background size looks fine on desktop but then gets cut off on mobile or tablet it can be pretty frustrating.
That's why I wanted to create an article that outlines best practices for finding that golden ratio so you don't have to waste your time tweaking sizes over and over again only to be disappointed.
I'll even show a unique way of adding a background image to your header.
Spending countless hours on your site instead of growing your business? Cut to the chase and get a free Wix consultation. Answers for your design needs.
Table of Contents
What Is The Size Of A Website Background?
How Do I Resize A Background Image In Wix?
What's The Best Wix Background Image Size?
Bonus: Adding A Wix Header Background Image
Conclusion
What Is The Size Of A Wix Website Background Image?
The only way you can know if you are doing this right is if you know your actual image size and finding your image size is just as easy as the last step we took. I'll include some quick directions here.
1) Click on "+" icon on the left-hand side menu of the editor
2) Move your cursor over the "Image" text and then click on the "My Image Uploads" section.
3) Click on the image you would like to check and then scroll down on the right side of the section till you see the "Resolution" numbers. This is your Wix image size. The "px" stands for pixels which is an online digital measurement like meters, miles, or inches.
Now that you know the actual image size it's time to compare this with the size of your strip on your site to see if the dimensions match.
In your editor make sure your Toolbar is displaying by hovering your mouse over the "Tools" tab on the top menu. Make sure the "Toolbar" option has a checkmark and if it does you will see the Toolbar appear on the right side of your editor. The section will say "Size (px)" and you will see the dimensions from both the width and height of your strip.
Now that you have the dimensions of each you can resize your image or find an image that will match your strip on your site.
If you choose an image with larger dimensions then your background image will be cropped.
If you choose an image with smaller dimensions then it will be stretched out in order to fill the strip on your site.
Again, it's important to remember that the Wix Editor is not fully responsive and when you are resizing your browser size to smaller dimensions.
Some autocropping will still happen to your Wix background image.
But there is a new platform being developed called Editor X that is fully responsive and can be designed for any screen size.
It's only in beta right now and has not been released to the public at the time of this writing.
That's why it's incredibly important not to waste time making changes and editing images if they won't make a difference.
If you're tired of figuring out the details and losing hours Click Here To Get Your Wix Site Fnished from a professional who spent the time learning so you don't have to.
But if you're still wanting to get it done yourself, you're going to need a way to resize your image.
How Do I Resize A Background Image?
The best way I have found to resize an image is by using a free online tool that does it for you. Very easy indeed.
There are several out there and they generally change pretty frequently but I have been using resizeimage.net.
Their platform will allow you to upload your image, resize it, then download the updated version all in one place. I highly recommend when doing some easy resizing to your images.
Wix claims, and does, automatically resize images for you and if you are adding a smaller image to your site then this is perfect.
But when adding background images it almost always resizes incorrectly.
Use an online tool to resize images and then upload into Wix to fit your strips.
What's The Best Wix Background Size?
As mentioned above, the ideal Wix background size is going to be dependent on several factors but if you make an image 1520px width then it will show better on a 15 in monitor when loaded.
Pickle Wix is a great resource to find Wix information and her article mentions setting the background-size of your image to at least 1920px.
Reason being, you will be able to still have a good quality background size and have little cropping as a result.
The height will depend on what your strip size is. Once you find the size using the method above, you will be able to resize the image accordingly and reupload to fit your strip.
I do not recommend going with Wix's recommendation of 3000px x 3000px because of the amount of cropping.
Keep in mind these sizes are for desktop and Wix will autocrop your images on mobile.
Editor X is a new building platform from Wix and is not released to the public yet but will be fully responsive so you can design your site for any device.
Knowing how to build a site on Wix can save loads of time. Time better spent growing your business.
Click here to get your site finished quickly and with a professional touch. Move on from designing to actually growing your business.
Bonus: Adding A Wix Header Background Image
And while we are at it, why not a footer background image as well!
There is currently no option under the header and footer settings that will allow you to add a background image BUT there is a sneaky way if you are looking for this effect for your site.
Keep in mind I am not sure how this would affect Wix SEO in any way and would actually be very interested in finding out, so if you're reading this and have an idea please comment below and let me know!
1) Click on the "+" icon on the left-hand side of the editor
2) Add your strip like we did when adding a background image. Next, click on the "Stretch" icon and then click on the "Page" button. You should see your strip shrink in width to the size of the gridlines.
3) Make sure your strip is smaller than the size of the header and then drag your strip into the header and once you see the "attach to header" sign, drop your strip into the header by letting go of the mouse.
4) Now change the Wix background image of the strip by using the method outlined above.
5) Click on the "Stretch" icon one more time and then click on the "Screen" button.
Now you have a Wix header background image! Attach any elements to the strip and they will stay in place throughout the site. Follow this same method for the footer and you will get the same result.
Strips inside of headers and footers may look cool but they can become tricky when editing your site if you don't know exactly what you are doing, its either deal with a little learning curve or wait till you're more comfortable with the platform.
Always remember the tug-of-war battle between design and functionality and giving your guests the best experience you can in your online home.
Conclusion
1) Wix has stated you should upload images at 3000px x 3000px but you need to keep your Wix background image size around 1520px width because that's how you will get a good quality picture with as little cropping as possible.
2) Keeping experimenting and trying new things by adding a Wix header background image but remember that by going out of the box you make it harder to measure what your problem areas are.
3) Use an online tool to resize your images easily. You can also do this with Paint or Adobe Photoshop but also by using free online tools.
If this article was helpful and you'd like to see more Wix building posts please reach out in the comments, or contact me through this site, or message me in other social media platforms.
Getting your feedback is the only way to truly understand how I can help and provide better quality material for you all.
Having control of your site is incredibly powerful and is what makes Wix a wonderful tool for entrepreneurs.
But if your site is draining your time then you need to hire a professional, delegate what you need, and focus on growing your business.
Let your actions become the difference in your business.