Add banner to Rowling theme add black background

• 

  roxanepajoul · Member · Dec 20, 2016 at 9:00 pm

  • Copy link
  • Add topic to favorites

  Hello,

  I am using Rowling for my blog and I discovered (once most of the site was built) that the theme does not support a header/banner.

  After reading quite a lot on the community forum, I have tried to use CSS to remedy this issue. BUT the image I am using as a banner is too small (here is the image: https://investigatingversaillesblog.files.wordpress.com/2016/12/banner_versailles.png?w=680).

  Consequently, I would also like to add a black background on each side of the picture.

  If anybody can help it would be greatly appreciated.

  Thank you!

  Roxane

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

• 

  thesacredpath · Member · Dec 21, 2016 at 8:28 pm

  • Copy link

  Hi Roxane, the image you referenced has a white background on each side of it. I would suggest if you are going to widen the image and have space on each side of it that you make the background transparent and then the background of the header area will show through. On Rowling, adding a header image is a bit of a challenge given the HTML structure of the header area. With the image as you have it now, this is about the best I can do.

  .header-wrapper {
    background-image: url('https://investigatingversaillesblog.files.wordpress.com/2016/12/banner_versailles.png');
    background-color: #000;
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
  }
  .header {
    padding: 150px 0;
  }