WordPress.org

Ready to get started?Download WordPress

Forums

Twenty Twelve Header Image not show 100% (12 posts)

  1. sunnysangster
    Member
    Posted 1 year ago #

    Hi,
    I'm using a Twenty Twelve child theme at http://www.christinabrittain.com/ 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?
    Thanks,
    Sunny

  2. paulwpxp
    Font hero
    Posted 1 year ago #

    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; }
    }
  3. Demetrius Pop
    Member
    Posted 1 year ago #

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

  4. paulwpxp
    Font hero
    Posted 1 year ago #

    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="site-url.com">
    	<img src="path-to-1040px-image.jpg" class="header-image" alt="my site name" />
    	</a>
      </div>

    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;}
    }
  5. Demetrius Pop
    Member
    Posted 1 year ago #

    Nicely done Font Hero. That works fine.

  6. paulwpxp
    Font hero
    Posted 1 year ago #

    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 :)

  7. sunnysangster
    Member
    Posted 1 year ago #

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

  8. Andrew
    Forum Moderator
    Posted 1 year ago #

    Font Hero saves the day again :)

  9. Demetrius Pop
    Member
    Posted 1 year ago #

    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.

  10. sunnysangster
    Member
    Posted 1 year ago #

    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.
    Cheers!

  11. twentyseven
    Member
    Posted 11 months ago #

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

  12. twentyseven
    Member
    Posted 11 months ago #

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

Topic Closed

This topic has been closed to new replies.

About this Topic