Insert an Image as Your Website Background

This guide will show you how to revolutionize the appearance of your website by inserting a background image. Keep in mind that some design templates are more suitable for adding background images than others. In this example you’ll see how we do it with design template 157j, which is a relatively easy process.
Choose a background image which is at least 1920px x 1080px to accommodate the normal size of a Full HD monitor. Since these kinds of images can be quite large, it’s good to experiment with the format. Geometric designs saved as .png files take up less data space, even in Full HD. The data size should be no larger than 500kB. Even images this size can load slowly for users with slow Internet connections.
Change your design template. Go to the Design tab and select a design template such as 157j.
02.5 Combined image with vectors PNG.png
Click on Use the Design.
03 Use design with vector.png
Your actual website will look like this.
04 Blank design template.png
Go to CSS Editing and upload the image you’d like to use as your background. You can do this by hovering over the green + icon in the upper right-hand corner of CSS Editing and selecting Upload New Image to Server.
05 Upload image with vectors.png
Once the image has uploaded, copy and paste its entire url into the CSS code (more detail below).
06 Add image to CSS with vectors.png
When using this design template we’ll insert the image url in the selector body as a replacement for the current background-image. Don’t change anything but the background-image value inside the parentheses and quotation marks. Save.
06.5 Add image to CSS with vectors.png
Go to your actual website to see how it looks.
07 New background.png
If the black text is difficult to read against your new background, change it to white. You can do this in CSS Editing. Under the selector body change the value of color to rgb(255,255,255), and save.
08 Change text color with vectors.png
Go to your actual website to see how it looks.
09 Background with white text.png
If you don’t want the background image to repeat on large monitors, add background-repeat: no-repeat; and make sure the value of background-position is center. You may also want to change the background-color to go with your image. (You won’t be able to see the background color on all screens.) Use a color picker to choose a suitable color and get its rgb.
10 More CSS with vectors.png
In some design templates the default setting for background-attachment is scroll. In other words, when you scroll down the page the image will move up and no longer cover the entire screen. If this is the case and you want the background image to stay in the same place no matter where you are on the page, add background-attachment: fixed; to the CSS code.
10.5 More CSS with vectors.png
05/06/2015 04:05:06
Or visit this link or this one