WordPress.org

Support

Support » Themes and Templates » Twentyeleven auto-resizing (responisve) tilte

Twentyeleven auto-resizing (responisve) tilte

  • whereskarlo
    Participant

    @whereskarlo

    Hi,

    I replaced 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 know I need to mess with the size option and tried calling these things:

    -webkit-background-size:cover;
    	-moz-background-size:cover;
    	-o-background-size:cover;
    	background-size:cover;

    How can I make it work? Thanks a ton!!

Viewing 8 replies - 1 through 8 (of 8 total)
  • stoatoffear
    Member

    @stoatoffear

    Instead of a background image, if you use an image <img> positioned absolutely and make it a percentage of the width of it’s relatively-positioned container (such as the body), it will change size when the browser window is re-sized.
    See http://www.cbt-eastbourne.co.uk for an example of an image in the background resizing using this method.
    Other elements need to move in order for them to work properly with the <img> as it re-sizes – I have used JQuery to assign different style sheets to the page as the browser window changes size. I don’t think this is very satisfactory, but with a third of visits to this site being from mobile devices we can say that it works for the user.

    whereskarlo
    Participant

    @whereskarlo

    Thanks for the reply, but that is slightly too technical for me to execute and I’d probably just leave it as is.

    Is there a reason the image in the title doesn’t respond to the auto-resize code I added?

    stoatoffear
    Member

    @stoatoffear

    No – wait, try background-size:100%;
    and maybe background-position:50% 50%

    whereskarlo
    Participant

    @whereskarlo

    I was hoping to do it in CSS3 and using the custom CSS editor. Do I need to add a class somewhere? Sorry I am still new to this but reading and trying to learn.

    html {
    	background: url(images/bg.jpg) no-repeat center center fixed;
    	-webkit-background-size: cover;
    	-moz-background-size: cover;
    	-o-background-size: cover;
    	background-size: cover;
    }

    Thanks a ton!!

    esmi
    Forum Moderator

    @esmi

    The custom CSS editor? Is this a wordpress.com site or a self-hosted WordPress install?

    whereskarlo
    Participant

    @whereskarlo

    It’s self-hosted at http://www.whereskarlo.com. I was referring to the twentyeleven theme which comes with a custom CSS editor that let’s you make a custom stylesheet. I currentlu have the following in it:

    #site-title {
    	text-indent:-9999px;
    }
    
    #site-description {
    	text-indent:-9999px;
    	height:1px;
    }
    
    #site-title a {
    	background:url('wp-content/uploads/2012/10/logo2.png') no-repeat;
    	display:block;
    	height:146px;
    	width:473px;
    }
    esmi
    Forum Moderator

    @esmi

    Um – no. There’s no custom CSS editor in the Twenty Eleven theme.

    If you are referring to the Editor in the Appearance sub-menu, then that amends the theme’s main CSS anything in there. And you should never edit the Twenty Eleven theme. It is the default WordPress theme and having access to an unedited version of the theme is vital when dealing with a range of site issues. First create a child theme for your changes.

    whereskarlo
    Participant

    @whereskarlo

    I just realized it is part of jetpack, it is under appearance but called “Edit CSS.” It creates a custom stylesheet that loads after the original one.

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Twentyeleven auto-resizing (responisve) tilte’ is closed to new replies.