Elegant Grundge Header Help?

• 

  ifdreamswereforsale · Member · Sep 14, 2013 at 3:22 am

  • Copy link
  • Add topic to favorites

  Hi,
  I know little about CSS and having purchase the CSS upgrade have only played around with the colours and font.

  I would like to put a head picture on my blog so it displays behind the header/title words (the words are Wearing the Trousers, Musings of a country tradie and her trousers). At the moment any image I put on it is only as wide as the width of the post column below it.

  Ideally, I would like an image to be as wide and as long as the black header band (which extends to the edge of the screen).

  Is there any way of getting around the default settings for this? My blog is wearingthetrousers.wordpress.com

  Hope I’ve explained it clearly enough.
  Help much appreciated
  Kate

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

• 

  justpi · Member · Sep 14, 2013 at 10:57 am

  • Copy link

  Paste this into the CSS editor, then paste the image URL where I’m showing:

  #header-wrap {
      background-image: url("IMAGE URL HERE");
  }
  #header {
      background-image: none;
  }

  Note:
  • To get the image URL, you upload the image via Media > Add New, and once it’s uploaded you click Edit and copy the URL from the “File URL” field of the Save module.
  • As you said, the dark band covers the whole width of the browser window, so your visitors will see a wider or a narrower part of the band, depending on their screen resolution. So your ideal won’t work well with any image: you need to create/upload an image that’s very short in height but very wide (perhaps wider than 1500px), keeping in mind that a varying part of its left and right sides won’t show, or create/upload a small image that will look ok when repeated horizontally.
  • In the future make sure you post CSS questions in the CSS forum, not the Support forum.