One specific and different header image per page (Lovecraft Theme)

• 

  ahimpactant · Member · Oct 17, 2016 at 4:13 pm

  • Copy link
  • Add topic to favorites

  Hi there,
  My site is in Lovecraft Theme. I would like to have a different header image for each different page. I tried the use the Image Vedette. The head image changed indeed only on this page but completely cropped and smaller in width, even if I used the 1280×444 format. The help desk suggested me to contact the CSS forum to create a specific CSS for that. Could you help me?
  Thanks in advance

  The blog I need help with is: (visible only to logged in users)

• 

  siobhyb · Member · Oct 17, 2016 at 4:40 pm

  • Copy link

  Hi @ahimpactant,

  Lovecraft is designed for a large custom header that works as a background image and always takes up 100% of the available width, no matter the screen size it’s being viewed on. Custom headers that work best in this type of theme are therefore more flexible, decorative or abstract, so they can handle some sort of cropping.

  If you don’t wish for your image to be cropped at all, then you can make use of the following custom CSS:

  .bg-image {
      background-size: contain;
      background-repeat: no-repeat;
  }

  Please note, the above will mean that your header doesn’t take up the full 100% available width of your screen but will instead display your image at its full size.

  Hope that information helps you out!