Skip to main content
Kinetic Community

Add a background image to the banner

Overview

In this article we refractor the background style for the banner on the services portal page.

Goals for this activity:

  • Add an image to the services package.
  • Use css to change the background display of the Service catalog banner.

Activity

Create images directory and add an image jpg

  1. From the src directory open the assets directory.
  2. Create an images directory.
    Asset Nav.PNG
    • To create new files and directories user the right mouse button.
  3. Add a image file to the images directory.
    • Use chrome image and search for banner jpg image.
  4. Save the image as "banner.jpg".
    • Make sure to rename.

Add background banner image using css

  1. In the assets directory open the styles directory.
  2. In the styles directory open the _layout.scss file.
  3. Find the class ".services-search-container".
    • Use ctrl-f to do a search of the file.
  4. Comment out the background-color attribute of the class.
    • Use ctrl-? to hot key a comment.
  5. Below add a background image attribute. 
    Note that the name of the image file will need to match the name of your file in the images directory
    background-image: url('../images/banner.jpg');
    
  6. Save the file.

View changes in the browser

  1. In the browser view the Services home view at: http://localhost:3000/<spaceSlug>#/kapps/services