_bw_page_header_twenty_eleven() – Generate the CSS to display a custom page header for the twenty eleven theme

Description

Generate the CSS to display a custom page header for the twenty eleven theme

For the twenty eleven theme we have to hide the current image and set a background image on the <header id="branding" tag The background image needs to be positioned below the h1 and h2 in order to make it appear similarly to the original custom header image code Note: There are some unsolved challenges when the browser is sized down

Usage

_bw_page_header_twenty_eleven( $post_id, $header_image );

Parameters

$post_id

( integer ) required – the unique id of the post/page/custom post being displayed

$header_image

( string ) required – the URL of the header image

Returns

void

Source

File name: oik-header/oik-header.php
Lines:

function _bw_page_header_twenty_eleven( $post_id, $header_image ) {
  // **?** - code to produce style tags different browsers
  // Note: the current solution seems OK for Chrome and Firefox
  //  -o-background-size: 100% 100%, auto;
  //  -moz-background-size: 100% 100%, auto;
  //  -webkit-background-size: 100% 100%, auto;
  //  background-size: 100% 100%, auto;

  e('<style type="text/css">');
  e( "body.postid-$post_id #branding, body.page-id-$post_id #branding  { background-image: url('$header_image' ); background-position: 0% 100% ; background-repeat: no-repeat; background-size: 100% 60%, auto;   } " ); 
  e( "body.postid-$post_id #branding a img, body.page-id-$post_id #branding a img{ display: none;  } " );
  e( "body.postid-$post_id #branding h2, body.page-id-$post_id #branding h2 { margin-bottom: 25%;} " );
  e('</style>');
  echo( bw_ret());
}