Make twentyeleven title image responsive

  • Author
    Posts
  • #1025947

    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 www.whereskarlo.com.

    #1026075

    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.

    #1026242

    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.