Title: Changing header image in functions.php
Last modified: August 31, 2016

---

# Changing header image in functions.php

 *  Resolved [richdal](https://wordpress.org/support/users/richdal/)
 * (@richdal)
 * [10 years, 1 month ago](https://wordpress.org/support/topic/changing-header-image-in-functionsphp/)
 * WordPress v4.4.2
    BuddyPress v2.5.1
 * I was trying to get the header image to change up under certain conditions. The
   HTML was displaying like this…
 *     ```
       <div id="branding">
       <h1 id="site-logo"><a href="URL" rel="home"><img class="header-image" src="LOGO_IMG_V1_URL" alt="" title=""></a></h1>
       </div><!-- #branding -->
       ```
   
 * A lot of the search results I was seeing were from questions a few years back
   and couldn’t tell if there would be a compatibility problem. As an example, I
   was seeing a few recommendations using CSS with “background: url()” but the current
   header image wasn’t setup as a background image.
 * I saw this suggestion and got it to work with Chrome, but wasn’t compatible with
   latest Edge, Internet Explorer, or Firefox
 * ./genbu-child/functions.php
 *     ```
       print <<<CSSTEXT
       <style type="text/css">
       .header-image {
              content:url("LOGO_IMG_V2_URL");
       }
       </style>
       CSSTEXT;
       ```
   
 * Once I can get the header image to update consistently across the browsers I 
   need to add conditions for when that loaded, but need to get the display part
   working right. Any recommendations I could use in my functions.php to set the
   header image?

Viewing 2 replies - 1 through 2 (of 2 total)

 *  Thread Starter [richdal](https://wordpress.org/support/users/richdal/)
 * (@richdal)
 * [10 years, 1 month ago](https://wordpress.org/support/topic/changing-header-image-in-functionsphp/#post-7187188)
 * I haven’t been able to find a way to modify the header-image with CSS consistently
   across web browsers.
 * I was trying to add a condition in my theme’s functions.php file to change up
   the header-image in a few places. Not familiar with using the WordPress filters
   but is there a way to use them to change up what I get back from get_header_image()?
 *  Thread Starter [richdal](https://wordpress.org/support/users/richdal/)
 * (@richdal)
 * [10 years, 1 month ago](https://wordpress.org/support/topic/changing-header-image-in-functionsphp/#post-7187201)
 * With a little trial and error I found the change was easiest to make with jQuery.
   Installed the [Head & Footer Code](https://wordpress.org/plugins/head-footer-code/)
   plugin to I could load my jQuery code at the end of the document and was pretty
   straight forward.
 * I used code similar to this and was able to add different conditions to change
   up which image I wanted to use.
 *     ```
       <script type="text/javascript">
       jQuery( document ).ready( function() {
         var loc = "http:/....../logoforheader.jpg";
         jQuery( ".header-image").attr("src",loc);
       });
       </script>
       ```
   

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Changing header image in functions.php’ is closed to new replies.

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 2 replies
 * 1 participant
 * Last reply from: [richdal](https://wordpress.org/support/users/richdal/)
 * Last activity: [10 years, 1 month ago](https://wordpress.org/support/topic/changing-header-image-in-functionsphp/#post-7187201)
 * Status: resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics