Change Logo Size

• 

  awaywiththespoons · Member · Feb 22, 2013 at 8:33 pm

  • Copy link
  • Add topic to favorites

  Hello!

  (http://blog.beccarose.co.uk)
  I have tried to change the size of my logo using the following css code:

  #branding {
  background: url(‘http://beckaroona.files.wordpress.com/2012/06/becca0.jpg’) no-repeat;
  width: 180px;
  height: 196px;
  }

  all that happens is there is a slightly bigger padding at the top of the site.

  Could you recommend a better way (I want to make it 180×196 px)

  thanks

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

• 

  designsimply · Member · Feb 24, 2013 at 3:49 pm

  • Copy link

  First, you need to adjust the image itself. You can actually do that with WordPress.com by putting ?w=180 at the end of the image link like this:
  http://beckaroona.files.wordpress.com/2012/06/becca0.jpg?w=180

  Next, “#branding” isn’t the right selector for the Blaskan theme which you are currently using. If you view the page source, you’ll see a section like this:

  <header id="header" role="banner">
  			<figure><a href="http://blog.beccarose.co.uk/" title="Becca Rose" rel="home"><img src="http://beckaroona.files.wordpress.com/2012/06/becca0.jpg" alt="Becca Rose"></a></figure>

  What you’re trying to do is override the image that is set there and set an new on using CSS. You can do that if you hide the img tag and then set the resized image as a background on the link that comes just before the image. Try updating the CSS to the following:

  #header figure a img {
  	display: none;
  }
  #header figure a {
  	background: url('http://beckaroona.files.wordpress.com/2012/06/becca0.jpg?w=180') no-repeat;
  	display: block;
  	height: 196px;
  	width: 180px;
  }