How to change header to background image


Andy

Administrator
Step 1

Find a suitable image. Typically the image width needs to be greater than 1700px.

This example is 1758x150 at 72 DPI.

header_background.jpg
 

Andy

Administrator
Step 2

In the control panel navigate to the following:

Appearance -> Style properties -> Header and navigation -> Header/logo row

1589311058640.jpg


Add the Image location and Extra information:

Code:
background-repeat: no-repeat;
background-size: 100% 100%;
 

Andy

Administrator
Step 3

In the extra.less template, add the following:

Code:
.p-header-content {
    height: 150px;
}
 
Top