Beautiful Pro Header Image

Community Forums Forums Design Tips and Tricks Beautiful Pro Header Image

This topic is: resolved

This topic contains 10 replies, has 3 voices, and was last updated by  nutsandbolts 2 months, 1 week ago.

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #72867

    mheffner
    Participant
    Post count: 6

    Can you share on the best way to make the Site Header Banner Image responsive? When viewed on a smaller device the 2000 x 200px image does not shrink to size like say the logo does causing only part of the image to appear. Appreciate any help you can provide.

    http://ninaroesner.info/
    #72951

    nutsandbolts
    Moderator
    Post count: 3104

    Find this in your stylesheet:

    .custom-background .site-header-banner {
    background: url(http://NINAROESNER.INFO/wp-content/uploads/2013/11/NinaH1.png) #eaeaea no-repeat center scroll;
    }

    and change it to this:

    .custom-background .site-header-banner {
    background: url(http://NINAROESNER.INFO/wp-content/uploads/2013/11/NinaH1.png) #eaeaea no-repeat center scroll;
    background-size: contain;
    }

    That should get it to resize correctly. Also, off topic but I’m a huge Nina Roesner fan! :)


    Andrea Whitmer, Owner, Nuts and Bolts Media
    I provide dev and training services for web designers • Find me on Twitter and Google+

    #73066

    mheffner
    Participant
    Post count: 6

    Hi Andrea,

    Thank you for your response! Unfortunately, this doesn’t seem to be working for me placed in style.css or when just trying in Firebug. This code isn’t found in my style.css sheet but is present since I have uploaded the header through the “background” section of the WordPress Dashboard. So not sure which stylesheet I would actually add this to. Any further advice you might have would be appreciated.

    Very cool to hear you are a fan! She is awesome and my wife Leah works and blogs with their group too!

    #73074

    nutsandbolts
    Moderator
    Post count: 3104

    Try removing it from Appearance > Background and pasting what I gave you into the stylesheet. It should achieve the same result. If it doesn’t, leave it in place and let me know – I’ll take a look at it to see what’s going on.


    Andrea Whitmer, Owner, Nuts and Bolts Media
    I provide dev and training services for web designers • Find me on Twitter and Google+

    #73880

    mheffner
    Participant
    Post count: 6

    Awesome, thank you Andrea! I had to remove the custom background from functions.php because it was overriding the style.css sheet still but once I removed it all this worked perfect. Thank you very much for your help!

    #88916

    francimarano
    Participant
    Post count: 4

    Hi!
    Thanks Andrea for the help, I had the same question.
    I was actually trying to do this with media-queries and it didn’t work.
    For the website I am working with the header resizes maximum until 480px, is the a way to make it smaller (eg 320px)?
    Thanks!

    http://solofrancesca.com

    #88952

    nutsandbolts
    Moderator
    Post count: 3104

    Try changing your bottom media query to this:

    @media only screen and (max-width: 480px) {
    
      .custom-background .site-header-banner {
          background: url(http://solofrancesca.com/wp-content/uploads/2014/02/header480.png) #ffffff no-repeat center scroll;
          height: 147px;
          max-width: 100%;
      }
    }

    Andrea Whitmer, Owner, Nuts and Bolts Media
    I provide dev and training services for web designers • Find me on Twitter and Google+

    #88953

    francimarano
    Participant
    Post count: 4

    Worked like a charm, thank you soooooo much!!!

    #88954

    nutsandbolts
    Moderator
    Post count: 3104

    No problem! Glad I was able to help. :)


    Andrea Whitmer, Owner, Nuts and Bolts Media
    I provide dev and training services for web designers • Find me on Twitter and Google+

    #105391

    mheffner
    Participant
    Post count: 6

    Andrea – It looks as though the beautiful theme has been updated since I made this update. I am trying to make the image responsive for my wife’s site here http://www.leahheffner.com/. For instance… Custom background is no longer in functions.php to remove. Could you share steps to update the image to be responsive? Or should I use media queries like the user above?

    #105653

    nutsandbolts
    Moderator
    Post count: 3104

    Hi! I believe the function for the custom background is now located in front-page.php, though there is still a call to the backstretch script in functions.php from what I recall.


    Andrea Whitmer, Owner, Nuts and Bolts Media
    I provide dev and training services for web designers • Find me on Twitter and Google+

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.