How do I upload logo to the header in Suits theme w/o compromising the quality?

• 

  mccoycounselling · Member · Feb 12, 2014 at 6:44 pm

  • Copy link
  • Add topic to favorites

  I’ve tried several file formats and sizes, including resizing my header logo to 960 x 180 pixels. To cover the black background, I’ve changed the CSS to:

  .site-header {
  height: 310px;
  }

  .site-header .home-link {
  min-height: 310px;
  }

  .site-header {
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  }

  the site is http://bbandbd.wordpress.com

  Thanks in advance!

  The blog I need help with is: (visible only to logged in users)

• 

  gracejiyoung · Member · Feb 13, 2014 at 3:56 pm

  • Copy link

  Hi there,

  Sure! Can you try replacing the CSS you added with this:

  #masthead {
  	background-image: url('http://bbandbd.files.wordpress.com/2014/01/copy-copy-cropped-baked-beans3-e1391722684578.jpg');
  	padding-bottom: 89px;
  	background-color: white;
  }
  
  #navbar {
  	position: relative;
  	top: 125px;
  	margin-bottom: 30px;
  }

  I think this would make the header logo a bit clearer.

  Feel free to reach out if you have any questions!

• 

  mccoycounselling · Member · Feb 14, 2014 at 2:43 am

  • Copy link

  Thank you, Grace! That did work! Unfortunately, when you put together the CSS that I needed for the header, I had the wrong logo up on the site at the time. (That was a low-resolution image that I quickly threw together.) I actually have a different logo now, and I’m unsure what to do when I re-upload it to the header section. What size should I use?

  Essentially, I would like a larger (280 px or so) centered logo, on a white background, with enough space below in the header to have the tagline of the site written clearly below the logo. Is that possible? (can I add custom code to put the tagline that low?) I’ve got the new logo up now…..

  Any suggestions would be great! Thank you again for you help~

• 

  gracejiyoung · Member · Feb 14, 2014 at 12:50 pm

  • Copy link

  Hi there,

  I found an image of your logo that was much bigger. Try updating your CSS to this:

  #masthead {
  	background-image: url('http://bbandbd.files.wordpress.com/2014/02/5baked-beans-logo.gif');
  	padding-bottom: 500px;
  	background-color: white;
  }
  
  #navbar {
  	position: relative;
  	top: 550px;
  	margin-bottom: 50px;
  }
  
  .site-description {
  	position: relative;
  	top: 668px;
  	color: black;
  }

  You can add a site tagline by going to Appearance > Customize > Site Title. Add your site description under Tagline.

  Cheers!

• 

  mccoycounselling · Member · Feb 14, 2014 at 4:15 pm

  • Copy link

  Wow! It’s really clear now, but now it’s coming out too large. How would I get the same effect, but with a logo that’s about 25% to 30% smaller? Do I need to upload a new image entirely? Shall I resize in photoshop first? if so, what size would work best? Would I need new CSS?

  again, THANK YOU SO MUCH! You are amazing!!!!

• 

  mccoycounselling · Member · Feb 14, 2014 at 8:50 pm

  • Copy link

  So to clarify: What I’d really likeis for the header and the logo (with the tag line beneath) to take up about the top half of the browser; with the menu bar and the first post visible on the screen when someone first visits the site. How would I achieve this? I’m happy to upload another version and size of the logo if necessary.

  Again, thank you so much for all of your help, time, and expertise! I really appreciate it so much!

• 

  gracejiyoung · Member · Feb 14, 2014 at 11:32 pm

  • Copy link

  Hi!

  Sure! I thought it looked a little big myself too! No need to upload another image. :) Try this out:

  #masthead {
  	background-image: url('http://bbandbd.files.wordpress.com/2014/02/5baked-beans-logo.gif'); 
  	padding-bottom: 280px;
  	background-size: 50%;
  	background-color: white;
  }
  
  #navbar {
  	position: relative;
  	top: 350px;
  	margin-bottom: 70px;
  }
  
  .site-description {
  	position: relative;
  	top: 472px;
  	color: black;
  }

  So just a heads up, just add a tagline in the Site Title tab and that will show up right underneath the logo.

  Cheers!

• 

  mccoycounselling · Member · Feb 15, 2014 at 6:14 pm

  • Copy link

  Okay! I’ve done everything you suggested, and with the final logo and some minor changes to the padding, I’m really happy with the results on the monitor view.

  The problem is that the logo is now scaling down far too much for the tablet and phone screen previews. (It’s also really tiny when I’ve check it out on my iphone.) Do you have any suggestions as so how to get it to be a fixed ratio within the header, regardless of the screen display size?

  Thanks again for your help!

• 

  gracejiyoung · Member · Feb 17, 2014 at 9:18 am

  • Copy link

  You can add more CSS for your iPad and iPhone using this:

  iPad:

  @media only screen and (device-width: 768px) {
  
          }

  Copy and paste the CSS in between there and adjust the numbers to get what you want.

  For iPhone:

  @media only screen and (max-device-width: 480px) {
  
  	}

  Do the same for the iPhone as well.

  Cheers!

• 

  mccoycounselling · Member · Feb 17, 2014 at 9:09 pm

  • Copy link

  Sorry, I’m a little confused by your instructions. What exactly do I need to do to make the header properly responsive for all devices?

  thanks!

• 

  mccoycounselling · Member · Feb 17, 2014 at 9:13 pm

  • Copy link

  Sorry, to clarify: …I did add the css and it doesn’t seem to make a difference. (The logo also scales down when I resize my browser window………

• 

  gracejiyoung · Member · Feb 18, 2014 at 10:49 am

  • Copy link

  Hi there,

  I have updated your CSS and it should look okay. Try taking a look and adjust the numbers as you desire!

  Cheers!