Header background image like on the demo Elements page

• sturader

  said

  I’m trying very hard to create a header background image like on the demo here> http://para.llel.us/themes/incentive-wp/elements/ – the one tucked right up to the bottom of the menu. I understand that the text over this image is called up by a static block or text on the page…. and the image is the background.

  When creating a new header for a test page there is “Content Source 1″, 2 etc… default is none. At the bottom of the header creation page is where you insert the “Header Background Image” from a file. I have a 1250px wide image made and inserted it.

  If I publish my page with this header, there is no image. If I go back and use a static block in Content area 1, the header image appears, but it’s being covered partially (mostly) by my static content. This is crazy, so if I type periods and carriage returns in a text block on the page it uncovers the image. My image already has text in it.

  I’m stuck, and have also tried using background images and static blocks alone which don’t produce the desired result. Am I using the header creation area wrong?

  thx
  stu

• jeffw

  said

  Hi, Stu.

  The image on the http://para.llel.us/themes/incentive-wp/elements/ page that is directly underneath the menu is actually part of the content, not the header. It’s a background image set for a Visual Composer row. Click on the little pencil icon for any row and you’ll be able to set an image for the background.

  The text over the top of the image is put there with some HTML in a Raw HTML element added to the row that has the background set; it uses a very sophisticated technique to position the text called “press the Return key a few times and see if that does it”.

  For the background image we also enabled the parallax effect; the dimensions of that image are 3600px x 2200px so that the parallax effect can move it around and make you seasick create that cool effect.

  Does that answer your question or would you like me to also address your question about header backgrounds? If so, please start a new topic for it and I’ll be glad to do that.

• sturader

  said

  It does answer and thanks @jeffw ….

  I successfully inserted a background image on top of my page. Since I didn’t want any other content over my image which is 300x1250px I used your sophisticated “return key” technique so that the next block on the page didn’t cover part of that image above.

  I will start another thread for my header question