Adding a header image to the posts page – Goran Theme.

• 

  elnavegante1900 · Member · Jun 23, 2016 at 6:01 pm

  • Copy link
  • Add topic to favorites

  Good evening!

  I’ve recently contacted the WordPress chat support service with a query and the duty engineer suggested me to start a thread here, as my issue can be solved (we think) with CSS code.

  I have a website with the Goran Theme.
  In this page within the website https://elnavegante.eu/contra-viento-y-marea/historial-del-blog/ instead of having a header image there is a reddish rectangle with the logo on the left.
  Apparently it seems that’s the way it is because my theme doesn’t accept a header image for that page.
  But I don’t like that plain color rectangle, and I would like to have an image there.
  Apparently it can be done with CSS.

  Can anyone provide support with this?

  Many thanks! :-)

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

• 

  donnapep · Staff · Jun 23, 2016 at 7:56 pm

  • Copy link

  Hi,

  First, you’ll want to locate this section of your theme’s CSS:

  .site-header {
    background-color: #b23d3c;
  }

  You could then replace background-color: #b23d3c; with this:

  .site-header {
    background: url(https://myimage.png);
  }

  where https://myimage.png is the URL of your image.

  You’ll also want to ensure that your image is of an appropriate size to fit in your header.

  Hope that helps.

• 

  alexjgustafson · Member · Jun 24, 2016 at 9:14 pm

  • Copy link

  Here’s my take on the code you can add to the CSS panel of your customizer:

  .blog .site-header{
      background-image: url(http://placekitten.com/g/1238/340);
      background-repeat: no-repeat;
      background-size: cover;
  }

  Make sure to replace http://placekitten.com/g/1238/340 with the URL of your preferred image.

  Using .blog .site-header for the selector instead of just .site-header will allow the background image you choose to only take place on your blog page, instead of taking over all the other headers that are ideally controlled by the featured image in Goran.

  Using ‘cover’ for the background-size will give you a little bit of leniency on the image you choose as well. Though you may prefer not to use that property.

• 

  elnavegante1900 · Member · Jun 25, 2016 at 9:45 am

  • Copy link

  Many thanks for your support! :-)

  I’ve tried both and finally opted for @alexjgustafson ´s CSS.

  There’s still one thing… The image gets cropped to fit in the box.
  Is there a way to keep it uncropped? (it’s a bit taller)

• 

  alexjgustafson · Member · Jun 25, 2016 at 11:08 am

  • Copy link

  You might try removing background-size: cover; and using background-size: contain; instead. But this just resizes the image and will probably show some of that background color on the sides afterwards, since your image is taller.

  Since this workaround is using a background as content, it’s kind of at the mercy of the size of the .site-header element itself. You could try keeping this CSS as it is, but also setting a new height for the element, to better fit your image.

• 

  elnavegante1900 · Member · Jul 2, 2016 at 3:30 pm

  • Copy link

  Great, many thanks for your support, @alexjgustafson :-)