WordPress.com

1. awaywiththespoons
   Member
   Feb 22, 2013, 8:33 PM

   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 180x196 px)

   thanks

   The blog I need help with is blog.beccarose.co.uk.

2. designsimply
   Staff
   Feb 24, 2013, 3:49 PM

   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;
   }

Topic Closed

This topic has been closed to new replies.