[Version 2] Change your page header images

By default we show the Background Image you upload under Website > Design as the header image on all pages.

If you'd like to customise the header image on inner pages where the space for it is narrower, you can set different images using CSS.

Setting the same header image for all inner pages

To set a new header image for all your inner pages and keep the one on your homepage you need to:

1. Go to your Media Library (under the Website tab) and upload your new image. Dimensions of 1500px by 220px normally work pretty well.

2. Scroll the the bottom of the media library and save the URL it gives you.

3. Go to Theme > Styles and copy/paste the following code snippet. Change YOUR IMAGE URL HERE to the URL from the media library.

<code>.page-header {  background-image: url('YOUR IMAGE URL HERE');}

Then reload your page and check the header stuck, it should look a little like this (with your image of course).

Setting different header images per page

To set different header images, you need to follow the steps above but tweak your CSS a little more. Use the following code snippet, changing the contents of the url('') to the appropriate image URL for the page.

<code>.page-login .page-header {  background-image: url('YOUR IMAGE URL HERE');}.page-signup .page-header {  background-image: url('YOUR IMAGE URL HERE');}.page-dashboard .page-header {  background-image: url('YOUR IMAGE URL HERE');}.page-profile-create .page-header {  background-image: url('YOUR IMAGE URL HERE');}.page-profile-edit .page-header {  background-image: url('YOUR IMAGE URL HERE');}.page-reset .page-header {  background-image: url('YOUR IMAGE URL HERE');}
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us