How to change header to background image


Andy

Administrator
Staff member
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
Staff member
Step 2

In the control panel navigate to the following:

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

1606009209308.png


Upload your background image and add the Extra information:

Code:
background-repeat: no-repeat;
background-size: auto;
 

Andy

Administrator
Staff member
Step 3

In the extra.less template, add the following:

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