increasing logo size in header

• 

  muzza1970 · Member · Oct 28, 2014 at 11:14 pm

  • Copy link
  • Add topic to favorites

  The site I need help with is http://mindexcel.com.au/.
  I would like to increase the size of my logo in the header of my site.
  The logo I uploaded is 1440 x 448 pixels, but it when I view the site the logo is too small.
  This is the image I’m using:
  http://muzza1970.files.wordpress.com/2014/10/final-logo-1.jpg
  Is there a way that I can make my header image larger using CSS?
  So you know, I got the image size and URL by visiting the media library, and clicking on the image.

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

• 

  thesacredpath · Member · Oct 29, 2014 at 12:41 am

  • Copy link

  The theme sets the size for the logo at a maximum of 300px wide. We can enlarge that with the following CSS, but the logo loses quality (since we are enlarging a 300px wide copy of your logo).

  .site-logo {
      width: 500px;
  }

  To maintain quality, what we can do is to set the visibility for the original logo to hidden and then add your image as a background element for the masthead area. The third rule above makes the full new logo image clickable.

  .site-logo {
      visibility: hidden;
  }
  #masthead {
      background: url("http://muzza1970.files.wordpress.com/2014/10/final-logo-1.jpg") no-repeat scroll center 0;
      background-size: 36% auto;
  }
  .site-logo-anchor {
      display: block;
  }

  See what you think.

• 

  2018hsltriathlon · Member · Nov 27, 2014 at 2:15 am

  • Copy link

  This helped me, thanks alot :)