How to Change Banner in Hexo

  • Navigate to /themes/Name Of Theme(mine is landscape)/source/css/images, then put your banner image file here.
  • Then navigate to /thems/Name of Theme/source/css and open _variables.styl. In this file, find code block that start with “//Header”, and change the address of “banner-url” to your image url.
    In my case, I change from “banner-url = “images/banner.jpg” to “banner-url = “images/cat.jpg”

  • Run hexo server. You should be able to check your new banner now. If you want to edit your banner in code, you can navigate to /thems/Name of Theme/source/css/_parital/header.styl and check “#banner” part.

The banner is set to expand from center. When you create the banner, it is the best to make sure the most important image in your banner file locating at the center of banner, vertically. In this case, no matter what screen size user is using, it will not affect your banner.