Adding a Background Image in Hallo

Hallo allows you to add a site image to feature as a background image on your website.

Adding a Site Image

To add your own site image, follow these instructions:

  1. Select the image from your PC that you want to showcase and resize it, if necessary.
  2. Copy the image to the assets/images folder.
    • If you’re testing the template locally on your PC, then simply copy the image.
    • If you’ve already uploaded the template to your host’s server, then FTP the image into the assets/images folder.
  3. Open the style.css file in a code editor and perform a search for ../images/background.jpg within the file.
  4. Change the file name to the file name of your site image.
    • For more information, refer to the code example.
  5. Save the file and view the updates on your PC.
    • If you’re testing locally, simply drag the index.html file into an empty tab of your favorite internet browser.
    • If you’ve already uploaded the template to your host’s server, then FTP the updated index.html file, and then view it in your browser.

Here is the code which you need to modify to link a new site image:

body.page-minimal-style {
    font-family: "Source Sans Pro", Helvetica, sans-serif;
    font-weight: 400;
    font-size: 45px;
    line-height: 60px;
    background-color: #222222;
    height: 100vh;
    letter-spacing: -0.5px;
    color: #aeaeae;
    background-image: url("../images/background.jpg");
    background-position: center center;
    background-size: cover;
}