Background selection can create a massive difference to the look of your site. By using a high impact image as your background it immediately draws the attention of the viewer. On this page, I'll show what things to look out for when selecting an image, and how to complement it with a header, menu or both.
Selecting your image
Image selection is the most important part of using one as a background. Make sure it is a high-quality photograph. The full-width screen size is 1920px. Anything that is more than 1500px - 1600px wide is going to work well. If you select an image that is smaller, you run the risk of having a pixelated image, compromising the integrity of your site.
Using a background with a header and navigation bar
If you have selected a great image to use as your background, it's a good idea to complement it with a good looking navigation bar, and if you want a header too. Like the image above, if you have nice clear space for a menu it's possible to show the menu as text only (so the text does not sit in a solid colour bar) to do this, set the transparency to 100% in the background colour.
An example of a fully transparent menu can be seen below.
If you have a background image where it's a bit busy where the menu would sit, its a good idea to set the background colour of the menu to a contrasting colour to the background, and setting it to full width.
Although fonts are completely subjective to each persons' tastes there are some do's and don't when it comes to selecting typefaces for your website. We are lucky within Sporty.co.nz to have a wide selection of fonts to choose from.
Use easy to read legible fonts, luckily we have curated and included the most popular and best to use.
Use a contrasting colour to the background the font is going on.
Use complimenting fonts. Headers are big and bold, the subtext is lighter and more elegant. Or visa versa.
Use the align buttons in the text toolbar to balance your site's content. (on this page everything is left aligned, making it elegant)
Don't overcomplicate it, the more fonts you use, or variations (bold, italic) the messier the page will look.
Don't use an overpowering font such as Impact or Arial Bold in your menu. It over crowd's the space around the word.
It's advised against using serifed fonts in paragraph text (serifed fonts are the little flicks you see on the ends of letters in such as this T in Times New Roman) Serifed fonts are great for titles but were not made for displaying on the web. In saying this, sometimes they work
How buttons can be set to display inline with your brand guidelines and enhance the look of your website. Also being able to set a global default button for ease of use.
How to use the button widget effectively
Our button widget can be used throughout your website and with a few selections can customise the look to your desire.