Make twentyeleven title image responsive

  • Unknown's avatar
    whereskarlo · Member ·

    Hi,

    I used this guide to replace my site title with a logo. I’m using the twentyeleven theme.

    I would like to make the logo responsive so that it will resize together with the rest of the page. I currently have the following in my twentyeleven custom stylesheet:

    #site-title {
	text-indent:-9999px;
}
#site-title a {
	background:url('http://www.whereskarlo.com/wp-content/uploads/2012/09/logo.png') no-repeat;
	size:cover;
	display:block;
	height:146px;
	width:473px;
}

    I have tried size:cover; and size:contain; but it doesn’t work. Any suggestions?

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

  • Unknown's avatar
    supportbot · Member ·

    The blog you specified at http://www.whereskarlo.com does not appear to be hosted at WordPress.com.

    This support forum is for blogs hosted at WordPress.com. If your question is about a self-hosted WordPress blog then you’ll find help at the WordPress.org forums.

    If you don’t understand the difference between WordPress.com and WordPress.org, you may find this information helpful.

    If you forgot to include a link to your blog, you can reply and include it below. It’ll help people to answer your question.

    This is an automated message.

  • Unknown's avatar
    designsimply · Member ·

    First, you probably want “background-size” not “size.” Second, the container width and heigh matter. Third, you should also consider media query rules at play here.

    This forum is for WordPress.com blogs, and your WordPress blog is not setup here at WordPress.com. However, it’s an interesting question. :)

    Please post at http://wordpress.org/tags/twentyeleven?forum_id=5 and reply back here with the link and I will take a look.

  • The topic ‘Make twentyeleven title image responsive’ is closed to new replies.