ATTENTION, PLEASE READ: New topic creation is disabled, as we have moved to a new support system. Your existing topics will remain, but for all new requests you will need to use the new system. Click here to go to the new support request form.

• Back to forum

  Posted in: Cardinal
• November 7, 2014 at 5:16 pm #126549
  FlawlessWeb

  Member

  Post count: 542

  Hey,

  Apologies if I am missing an obvious option in the backend here, but I am wondering how would go about placing a background image/texture behind the entire header?.

  What I am trying to replicate is something like this:
  http://tyronegaa.ie/

  As you can see, that is using the following css:

  #header {
  background: url(img/tyrone_gaa_header_03.jpg) center center repeat-x #ee3224;
  color: #FFF;
  } 

  That image then extends the entire width of the browser window.

  How would I achieve that in Cardinal?

  Thanks.

  November 7, 2014 at 7:24 pm #126572
  Rui Guerreiro – SUPPORT

  Keymaster

  Post count: 25779

  Hi,

  Using the image from the other site just has an example.

  
  
  #header-section #header{
  
  background: url(http://tyronegaa.ie/wp-content/themes/tyrone_gaa_01/img/tyrone_gaa_header_03.jpg) center center repeat-x #E5D6D5;
  
  }

  Final result
  https://www.dropbox.com/s/hfx82xyioeb3cg3/header_example.png?dl=0

  -Rui

  November 8, 2014 at 9:34 pm #126673
  FlawlessWeb

  Member

  Post count: 542

  This reply has been marked as private.
  November 10, 2014 at 10:14 am #126882
  laranz – SUPPORT

  Member

  Post count: 3186

  Hi,

  1. Try adjust the background position of those divs separately, http://www.w3schools.com/cssref/pr_background-position.asp ( you can also Google search background-position if you are not rely on w3schools )

  2. Else, you can open up the header.php and tie the both div in to a single new div, and then apply the background to that div. It will do the trick, no other way to fix it.

  Let us know,

  Thanks,
  laranz.

  November 10, 2014 at 10:23 am #126887
  FlawlessWeb

  Member

  Post count: 542

  Ok thanks,

  Ill give it a try.

  November 10, 2014 at 1:08 pm #126967
  Kyle – SUPPORT

  Moderator

  Post count: 35880

  No problem

  November 10, 2014 at 9:12 pm #127144
  FlawlessWeb

  Member

  Post count: 542

  This reply has been marked as private.
  November 11, 2014 at 8:15 am #127205
  laranz – SUPPORT

  Member

  Post count: 3186

  Hi,

  That is because the other two backgrounds are loaded, try to put this in Custom CSS.

  #aux_header, #header { background: none; }

  Let us know,

  Thanks,
  laranz.

  November 11, 2014 at 8:54 am #127216
  FlawlessWeb

  Member

  Post count: 542

  This reply has been marked as private.
  November 11, 2014 at 9:11 am #127218
  laranz – SUPPORT

  Member

  Post count: 3186

  Hi,

  It is inside the core file, so I suggest you to include that folder structure in the child theme, then change the include_once in the functions.php in the parent theme..

  include_once( SF_FRAMEWORK_PATH . '/core/sf-header.php' );

  Change the SF_FRAMEWORK_PATH to the child theme path.

  Let us know,

  Thanks,
  laranz.

  November 11, 2014 at 9:19 am #127219
  FlawlessWeb

  Member

  Post count: 542

  So there is no way of permanently changing it in the child theme? i.e. I would have to change a line in the main functions.php after every theme update?

  November 11, 2014 at 9:22 am #127220
  laranz – SUPPORT

  Member

  Post count: 3186

  Hi,

  Yes I afraid so, it is inside the main core file. I ask one of our colleague about the possibility, there is a thread about that some times before, I can’t able to get it via search.

  Thanks,
  laranz.

  November 11, 2014 at 9:38 am #127227
  Kyle – SUPPORT

  Moderator

  Post count: 35880

  Hi

  You’ll need to copy the whole function into your child theme’s functions.php file, starting from this line:

  if ( ! function_exists( 'sf_header' ) ) {

  Make sure you end it on the right closing bracket for that function

  – Kyle

  November 11, 2014 at 10:27 am #127237
  FlawlessWeb

  Member

  Post count: 542

  Hi Kyle,

  #1. Include the file structure into my child theme as instructed above
  #2. Copy that altered function into my child themes function.php file…

  That would ensure it does not get overwritten on theme updates?

  Thanks.

  November 11, 2014 at 10:41 am #127244
  Kyle – SUPPORT

  Moderator

  Post count: 35880

  No need for #1, just copy the function into your functions.php file and it will override the parent one

  – Kyle

• Back to forum

  Posted in: Cardinal