Need help? Check out our Support site, then


Change Logo Size

  1. awaywiththespoons
    Member

    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. 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.

About this Topic