Skip to main content
Kinetic Community

Change the background image in the header and footer

HeaderFooterNew.PNG

Steps:

  1. Update CSS file for header background

  2. Update CSS file for footer background

Update CSS file for header background

FileStructure.PNG

 

 

 

 

 

 

 

 

 

  1. ​Navigate and open the /css/master.css file
  2. Find the .header CSS rule in the file. 
  3. Change the background attribute to point to the new background image: parallelogram-background.jpg 
.header {
background: url(“../images/parallelogram-background.jpg”);
min-height: 7.5rem;
position: relative; }

Update CSS file for footer background

  1. Find the .footer--top CSS rule in the file. 
  2. Change the background attribute to point to the new background image: parallelogram-background.jpg 
.footer--top{
background: url(“../images/parallelogram-background.jpg”);
position: relative;
border: none !important;
height: 20rem; }
  1. Save the file. 
  2. Refresh the webpage to see the changes.