Responsive Header Background in WordPress Twenty Thirteen

The header background is not responsive in WordPress Twenty Thirteen Theme, it is chopped on both sides for smaller screens. The header background can be made responsive with little effort. We have written about responsive logo image in the header in our earlier article on customization of Twenty Thirteen header. Here we have written about the responsive background where background can be logo image also.

Responsive Header Background in Twenty Thirteen

The header background in twenty thirteen is 1600 x 230 pixels as per default settings. Header background is set by a file custom-header.php which is part of twenty thirteen theme. Within this custom-header.php , there is a function twentythirteen_header_style() which fetch the assigned header image through WordPress function get_header_image() and applies the url of the same header image to background CSS property of site header.

Look at the following code in custom-header.php of Twenty Thirteen
function twentythirteen_header_style() {
    $header_image = get_header_image();
    $text_color = get_header_textcolor();

 

    // If no custom options for text are set, let’s bail.

    if ( empty( $header_image ) && $text_color == get_theme_support( ‘custom-header’, ‘default-text-color’ ) )

        return;

    // If we get this far, we have custom styles.

    ?>

    <style type=”text/css” id=”twentythirteen-header-css”>

    <?php

        if ( ! empty( $header_image ) ) :

    ?>

        .site-header {

            background: url(<?php header_image(); ?>) no-repeat scroll top;

            background-size: 1600px auto;

        }

    <?php  endif;

 

If user want to create responsive header background in Twenty Thirteen, then this CSS property set through the above said function has to be changed. Different images can be set for different media queries. For example a larger image can serve header background up to 999 pixels then a medium size image can be used up to 647 pixels and then a smaller image for mobile devices. So instead of using single background image in site-header CSS property, set different background image according to different media queries.

User can bypass the custom-header.php file by removing the CSS style set through site-header and make the necessary changes in style.css file for the header background ( in site-header property). Otherwise user can modify the site-header at custom-header.php for making the responsive background.

Look at the site-header property set in custom-header.php file of Twenty Thirteen
.site-header {
            background: url(<?php header_image(); ?>) no-repeat scroll top;
            background-size: 1600px auto;

        }

 

If we change the above property with
.site-header {
            background: url(‘http://localhost/wordpress/wp-content/uploads/2013/08/logo-large.gif’) no-repeat scroll top;
        }

        @media (max-width: 999px){

            .site-header {

            background: url(‘http://localhost/wordpress/wp-content/uploads/2013/08/logo-medium.gif’) no-repeat scroll top;

        }

        }

        @media (max-width: 500px){

            .site-header {

            background: url(‘http://localhost/wordpress/wp-content/uploads/2013/08/logo-small.gif’) no-repeat scroll top;

        }

        }

So remove default site-header CSS from custom-header.php and change site-header as pointed above in custom-header.php. Otherwise insert the above media queries in style.css. The positioning of responsive header background can be set according to size and placement of image.

  • Carson

    Thank you for this information. I attempted this and messed up somewhere. First, I don’t see a custom-header.php in my TwentyThirteen (I see header.php, but no custom-header.php). Also, I created the new custom-header.php you suggested in a child theme. I’m unclear what the syntax should be for this:

    background: url(‘http://localhost/wordpress/wp-content/uploads/2013/08/logo-medium.gif’) no-repeat scroll top;

    For instance, Is “localhost” literally “localhost” or is it the name of my website?

    Thank you, ~Carson

    • http://www.findurlaptop.com Neha

      custom-header.php is located inside the inc folder in theme.The url I pointed out is just for exaqmple where I tested all these, You can place your header background image url in the background property.

    • http://papogp.com/ Diego Nei, MBA, PMP®
  • Jeff Armstrong

    All you need to do is add a background-postion to .site-header in the inc/custom-header.php. So, you don’t need multiple images and media queries. Add something like the following to custom-header.php. Note this file is in the inc folder of the theme. The postion will depend on your image.

    .site-header {

    background: url() no-repeat scroll top;

    background-size: 1600px auto;

    background-position: -300px;

  • windysunny

    Thanks for this post! I am trying to work on this right now and I’m having some trouble. I successfully uploaded 3 different sizes of banners to my Child Theme, inserted the new code into Custom CSS:

    .site-header {

    background: url(‘http://www.littlemusicmakers-potsdam.com/wp-content/uploads/2014/03/LMM-Header-Banner Large.png’) no-repeat scroll top;

    }

    @media (max-width: 999px){ etc. etc…….

    & activated it. But now all it shows is the original orange circles banner. Your instructions say that I need to “remove default site-header CSS from custom-header.php”. How do I do this in my Child Theme? I can’t seem to find the place to allow me to delete anything from the CSS.

    Thanks in advance!!