Im using customiser to load and image into the header of my theme, since its customiser its inserting it via css as a background image, however when loading it, it won't appear unless padding is added to it, is there a way to load an image in without having to set padding or other measurements, i want the header to adjust its height with the size of the logo which might vary from time to time so using a fixed height i want to avoid. below is a link to the site with it, its set currently to padding:20px and my code below that. link to site

CODE: html

    h1.dragoncove_client_logo {
        background-repeat: no-repeat;
        padding: 20px;

<div id="dragoncove_desktop_menu_1">
<div class="">

        <div class="medium-12 large-2 columns">
            <!-- insert custom logo here in customizer -->
            <div><h1 class="dragoncove_client_logo"></h1></div>
        <div class="medium-12 large-10 columns">
            <div class="float-right"><?php dragoncove_slot_1(); ?></div>
        <div class="large-12 columns">
            <?php dragoncove_slot_2(); ?>


CODE: function

// Header Setting (upload logo)
$wp_customize->add_setting( 'dragoncove_header_logo' , array(
'default'     => '',
'transport'   => 'refresh',
'sanitize_callback' => '',
) );

// Header Control (upload logo)
$wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'dragoncove_header_logo', array(
'label'     => __( 'Logo', 'dragoncove_header_logo'),
'section'   => 'dragoncove_header_section',
'settings'  => 'dragoncove_header_logo',
) ) );

h1.dragoncove_client_logo {background: url(<?php echo get_theme_mod('dragoncove_header_logo', '')  ?>); }

Simply put...

You can either add this to the background properties:

background-size: contain;

This will have the image scale proportionately to consume the available area.

Or you can change the image to NOT be a background image. That will allow you to set more relative dimensions (like a fixed height or width with an auto value on the opposite).

Contain on the background-size will work better without adjustments to the rest of the menu, however.

And yes, you will still need to pad the area unless you want to increase the available dimensions of that container it's in. Otherwise it's a sliver (the background image). Alternatively, you could have a set height because then the image would contain to fit.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.