Community Forums › Forums › Archived Forums › Design Tips and Tricks › Beautiful Pro Header Image
Tagged: background, beautiful pro, header banner
- This topic has 10 replies, 3 voices, and was last updated 9 years, 11 months ago by nutsandbolts.
-
AuthorPosts
-
November 13, 2013 at 8:56 pm #72867mheffnerMember
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/November 14, 2013 at 10:22 am #72951nutsandboltsMemberFind 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/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+November 14, 2013 at 9:01 pm #73066mheffnerMemberHi 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!
November 14, 2013 at 9:49 pm #73074nutsandboltsMemberTry 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/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+November 17, 2013 at 9:03 pm #73880mheffnerMemberAwesome, 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!
February 6, 2014 at 1:32 am #88916francimaranoMemberHi!
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!February 6, 2014 at 10:33 am #88952nutsandboltsMemberTry 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/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+February 6, 2014 at 10:36 am #88953francimaranoMemberWorked like a charm, thank you soooooo much!!!
February 6, 2014 at 10:36 am #88954nutsandboltsMemberNo problem! Glad I was able to help. 🙂
Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+May 15, 2014 at 5:57 pm #105391mheffnerMemberAndrea - 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?
May 17, 2014 at 2:53 pm #105653nutsandboltsMemberHi! 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/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+ -
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.