WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Stretch Header Image Size (16 posts)

  1. johnborsch
    Member
    Posted 1 year ago #

    Hello, how can i stretch the header image size above my menu to occupy all the space including the surrounding black space. can this be done in my styles.css?

    http://www.johnborsch.com

    default twenty twelve theme using child

  2. Andrew
    Forum Moderator
    Posted 1 year ago #

    Unless you use absolute positioning (bad for different browser sizes), you'll have to change the template's structure, which would require a Child Theme. Have you a Child Theme?

    Actually, you could do it with minus margins in CSS, but you'll likely run into browser compatibility issues there.

  3. johnborsch
    Member
    Posted 1 year ago #

    Andrew, i do have a child theme. I have tried modifying my css and have been able to manipulate the header and achieve almost what i want. i am able to basically remove the top, bottom and left margins. this satisfies occupying the black areas with the exception of the right side.

  4. Andrew
    Forum Moderator
    Posted 1 year ago #

    Which route do you want to go down:
    - Absolute positioning
    - Restructure HTML (and write CSS)
    - Minus Margins CSS

  5. johnborsch
    Member
    Posted 1 year ago #

    I would like to take the easiest route. If it can be done with css that would be great.

  6. Andrew
    Forum Moderator
    Posted 1 year ago #

    At to the Custom CSS section of the dashboard, or Child Theme stylesheet;

    img.header-img {
     margin-left: -40px;
     margin-top: -40px;
     margin-top: -24px;
     width: 1040px;
     max-width: none;
    }
  7. johnborsch
    Member
    Posted 1 year ago #

    hey andrew, thanks. the third margin syntax is margin-bottom right, not a second "top". this looks real good. can you please explain width and max-width please.

    John

  8. Andrew
    Forum Moderator
    Posted 1 year ago #

    There's another style setting max-width to 100%. So the size of the image, 960px, is being set as the 100% value. If you don't set max-width to none, you won't be able to set the width as 1040px.

  9. Andrew
    Forum Moderator
    Posted 1 year ago #

    By the way, that margin-top was a duplication, you don't need a margin bottom or margin right.
    Take this one away;

    margin-top: -40px;
  10. johnborsch
    Member
    Posted 1 year ago #

    Thank you Andrew!!!

  11. Andrew
    Forum Moderator
    Posted 1 year ago #

    And thank you, Johnborsch for contributing to the WordPress.org community.
    Really, sharing your problems here helps others so much.

  12. ihaveacamaro
    Member
    Posted 1 year ago #

    ^ I literally just searched for this exact same question, so yeah it does help to have people ask questions. Thanks johnborsch and thank you Andrew!!

  13. johnborsch
    Member
    Posted 1 year ago #

    : )

  14. packersinsider
    Member
    Posted 1 year ago #

    johnborsch,

    I am so in awe of A) nice people like you and B) brilliant people like you.
    I wish so much I knew these things.....

    I do have one quick question right now about the header on my page http://www.packersinsider.com

    I want to replace it with a new one. I have it already designed. I just don't know where to go to put the new graphic, to switch it.

    I feel like I did this once before about 3 years ago, and thought I had to do it over at GoDaddy or wherever I got the domain name, or hosted it. But I can't remember where, how..... and this seems such a simple, basic thing I am a total idiot.

    I'd like to do some other freshen-ups with this site too, but not as urgently as changing the simple header.

  15. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    @packersinsider, please post your own thread -- this thread is marked resolved and your current question is not the same as the OP.

  16. packersinsider
    Member
    Posted 1 year ago #

    Thanks, sorry. Usually I try not to start additional threads..... will do.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags