Modify Genesis Custom Header CSS

Question

I am using the Associate Theme based on the Genesis framework and I'm trying to use a background image and background colour in the header. Genesis seems to dynamically generate the CSS for this and I get:

.custom-header #header {
    background: url(http://xxxxx.png) no-repeat !important;
}

What I need is to change this to:

.custom-header #header {
    background: white url(http://xxxxx.png) no-repeat !important;
}

I cannot find where to do this and un-hooking the genesis header and manually coding it in seems to defeat the object of using the framework.

Does anyone know how I can achieve this, please?

Answer 1

Hook onto the same action as the genesis header function and kick out your overriding CSS:

function wpse_218701_genesis_header() {
    ?>

<style>
    body.custom-header #header {
        background-color: white !important;
    }
</style>

<?php
}

add_action( 'genesis_header', 'wpse_218701_genesis_header' );