0

How To Add A Background Image

(In screenshots steps are highlighted in green for easier reference)
 
1. In order to add an background image to your site you must first add an image element to your site.

image08.png


2. Upload the image that will be used as the background, and Click Save.

image00.png

3. Next click on “Go to Live Site,” this is located in the top navigation bar

image07.png

4. Right-Click on the Image, and from the menu that pops up, select, “Copy Image Location/Address” (depending on Browser)

image06.png

5. The link to the background image has now been copied to the system clipboard.
6. Please return to the editor and click on the edit button of the element the background is going to be applied to.

image04.png

7. Now go to the CSS tab (all elements have a CSS tab)

image09.png

8. In the Element CSS field, add the following code:
  $this { background-image: url(‘paste image link’); }

image01.png

 

  • Other options to add to your background (For More Info)
    • background-color, sets the background color, will only be seen if the image used is smaller than the size of the element
    • background-repeat, this property sets if/how a background image will be repeated
      • no-repeat, image will not be repeated
      • repeat,  image will be repeated both vertically & horizontally
      • repeat-x, image will be repeated only horizontally
      • repeat-y, image will be repeated only vertically
    • background-position
    • top left, top center, top right
    • center top, center center, center right
    • bottom left, bottom center, bottom right

image05.png

 

9. Click “Save Changes
10. Now that your element has its background image it is time to delete the image element containing the image used.

Hover over the element and click on image03.png to delete.

11. A confirmation box will appear, to make sure that you would like to delete the element

image02.png

12. Hit delete

4 comments

Please sign in to leave a comment.