Background designs

It's very easy to change the background design on your mono website, even down to page level. And the fact that you can upload different background designs to each of your pages gives you a great opportunity for creating unique sites.

Uploading background images to your pages is easy but there are also a few things to consider before you get started. In this section you will find a few explanations and tips to how you can get good results.

Background and top images

Once you have chosen your skin, pick a background image or pattern that matches it well. If you have chosen a skin with a light text your background should be dark and if you have chosen a skin with dark test your background should be light. 

You can also work with the composition on your page to create an effect. Try placing the background image in one side of the page or move your content further down the page to allow room for a beautiful background image in the top of the page. Also try to let the background image fade out into the background color to allow for a smooth transition from image to color.

In this example you see a portrait used as large background image (settings in the tool are placed top and center). The compisition of the photo, however, contains the portrait out to the right side. This allows for site content to be placed on the left without taking from the image. Before you start making your page, try to draw it quickly on a piece of paper before adding it to the tool. It will save you time and help avoid having to make too many edits.

Be aware of different screen resolutions

Using photographs as background images has an amazing effect on a website. But remember that the photos have to be wide in order for them to look good on screens with a high resolution (it dosn't scale like the Jumbotron module). If your photo is not big enough to fit the whole screen, another option is to let i fade into a color matching the photo in each side of the page.

In this example the background image is about 2500 pix wide and about 900 pix high. The image has been compressed to be about 100k. It is an advantage to compress it further since many people still have slow Internet connections and high resolutions may slow the loading process. Note that in this example there is a black menu bar and a logo in the background image and in the bottom it fades into a black color. 

Patterns and top graphics

Background images can make your website slower if they are too large in file size. Therefore it can be an advantage to use patterns or fading instead. This way you only have to use one graphic because it repeats itself like a pattern or a top design. You can also work with a graphic element on top of a page. This often makes the page faster because it takes up less space than a full photo.

Below you can see different examples on background patterns, fading and top image graphics.

Above you see a page with a background image that looks like crumbled paper. This gives the site a little texture and life. In the top is a full banner image using the Jumbotron module.

In this example you see a background image with a wood motif. The background image is centered at the top and fades out to the background color at the bottom.

Goodpeople (above) use large blue graphic as their backround image. The little arrow down is also a part of the background image which then flows nicely into the page's background color. The large text over the blue background image is using the Display text module. 

This example above shows a background image using a profound photo. In this case, it is a photo chosen to express Zenzez's brand and their jewelry style. What you can't see in the image above is that all the images fade into black so it still looks good on large screens as well.