Support » Themes and Templates » Twenty Twelve Header Image not show 100%

  • Hi,
    I’m using a Twenty Twelve child theme at I’ve tried multiple things to get my header to fill up the entire container. I’ve sized it to 1040 instead of 960, but it’s still shows as 960. I’ve changed my header.php to:

    <?php $header_image = get_header_image();
    		if ( ! empty( $header_image ) ) : ?>
    			<a>"><img src="<?php echo esc_url( $header_image ); ?>" class="header-image" width="100%" height="100%" alt="" /></a>
    		<?php endif; ?>

    [Please use backticks – not single quotes – for posting code here]

    But that doesn’t work. Can someone please help?

Viewing 11 replies - 1 through 11 (of 11 total)
  • On a sidenote, there is this "> visible from the markup on the <a> wrapping the <img> , so just fix the missing href attribute.

    To make the header image 1040px, you got to make the whole site wider, but doing so must be done to screenwidth that’s wide enough only, otherwise it will cause a horizontal scrollbar.

    Try this

    @media screen and (min-width: 1120px) {
    	.site { max-width: 1040px; max-width: 74.2857143rem; }

    Have you tried adjusting the header image thumb size in functions or related file?

    Please forget my first answer.

    I thought you want to display the logo with its full upload size, but you actually want to have the logo covers all the header area.

    Here is what to do in header.php

    Just below this line:
    <div id="page" class="hfeed site">

    Put in:
    <div class="myhead">..</div>

    Inside that div, put in:
    <a><img /></a>

    The structure looks like this:

    <div id="page" class="hfeed site">
      <div class="myhead">
    	<a href="">
    	<img src="path-to-1040px-image.jpg" class="header-image" alt="my site name" />

    The <a><img /></a> could be a hardcoded one like that, or just copy over that part from header.php of Twentytwevle.

    Then put this in your child’s style.css

    .site-header {padding-top:0;}
    .header-image {margin-top:0;}
    .myhead {margin-left:-24px;margin-right:-24px;}
    @media screen and (min-width: 960px) {
    	.myhead {margin-left:-40px;margin-right:-40px;}

    Nicely done Font Hero. That works fine.

    Demetrius Pop, thanks for testing it out, actually it was your previous post that I came back to re-read the topic again and found that I misunderstood the topic 🙂

    Brilliant!!!! Thank you sooo much! This has been haunting me all week 🙂

    Moderator Andrew Nevins


    Front-end developer

    Font Hero saves the day again 🙂

    Hey sunnysangster, did you figure out the single tic issue? It seems that you are doing it right. Also, I am curious as to why you changed the custom-header logic? I’m pretty much a nube (about a yr.), but it seems that the part you took out is the part that lets the user upload any size image for the header (or at least up to 2000px by 250px). Although, I see that maybe you are designing a site for a client, and maybe you need the image to be wider or something.

    Yes, I wanted the image to fill up the entire container, and yes it is a client project.
    Not sure what you mean by single tic issue?
    I’m pretty new to using Word Press as a client CMS myself.

    thanks paul
    was about to shave my head and start chanting to some unholy entity…

    why does this work and not margin: 0, auto ??
    .myhead {margin-left:-24px;margin-right:-24px;}

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘Twenty Twelve Header Image not show 100%’ is closed to new replies.