HTML5 Tips: Using Photo as Background

Designing with Wix | March 28th 2012

So you’re building your own HTML5 website, you’ve looked around for web design trends and you know exactly what you want. Problem is, you don’t know how to translate your artistic vision into a web ready. Sounds familiar? Wix to the rescue!

Wix’ new HTML5 website builder is a powerful design platform that allows you to easily create many kinds of web content. Using the HTML5 editor, you can design your dream website and follow all the visual trends you love.

To make things even more simple, we’re happy to introduce a blog series that explains how to recreate these web design trends withthe Wix HTML5 editor. Following these tips, you will be able to implement beautiful design features with just a few clicks.

 Trend Alert: Beautiful Backgrounds with HTML5

Lesson #1 – How to Use a Photo as Website Background

Many website owners prefer to use images as backgrounds instead of a color scheme or a texture. A large, high quality photo can be very helpful at captivating site visitors and determining a distinct atmosphere for the entire website.

Use Wix to Add an Image to Your Website

  • Choose an HTML template, roll over and click “Edit”.
  • On the left menu, click on “Design” (brush icon), and then “Background”.
In the left menu, click on “Design” (brush icon), and then “Background”
  • In the Background box, click “Upload & Customize Background”.
In the Background box, click on “Upload & Customize Background”
  • To change the existing background, click “Change Image”.
To change the existing background, click “Change Image”
  • In the “My Images” tab, click “Upload Image” and choose a file from your computer.
  • After the image is uploaded to the gallery, choose it and click “OK”.
In the “My Images” tab, click “Upload Image” and choose a file from your computer
  • As the image appears in the background, you can now play with its positioning in the Background box by clicking on the different squares.
  • The default size is “Full Screen”, but you can choose a different size according to your needs.
The default size is “Full Screen”, but you can choose a different size according to your needs

Wix Tips

  • The background image sends a message about your business or service. It will have an impact with your site visitors, so choose wisely!
  • The “Full Screen” size option is highly impressive. We recommend this mode unless your site has other needs.
  • Use only images in high resolution and excellent quality. A smudged background photo will ruin the entire site.
  • Make sure the background image doesn’t clash with other site elements.
  • Text colors should be in contrast to the image colors. If needed, change text color or add Shapes and Boxes around the texts so that site visitors can read them easily.
Soren Rose Studio

Soren Rose Studio

Creative People

Creative People

David Mullett

David Mullett


Tagged with: . .
14 comments

Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>