WordPress.org

Ready to get started?Download WordPress

Forums

Make twentyeleven title image and background responsive (3 posts)

  1. whereskarlo
    Member
    Posted 1 year ago #

    Hey guys,

    I have set my logo to appear where the website title normally does in my theme. I am using Twentyeleven. I want the logo to automatically shrink with the screen but even though I have added some size:cover code it doesn't work.

    Below is my custom CSS code for placing the logo:

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

    I tried all of those but they don't make my logo automatically resize.

    I am also trying to make the background stretch to the screen. The background image is 1024px wide but I can't figure out how to make it happen.

    Any help is appreciated as always, thanks :)

  2. whereskarlo
    Member
    Posted 1 year ago #

    So I have found this website that resizes the background successfully.

    The code in use is:

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

    Question is, how do I call this from the Custom CSS editor? I have tried #body and various others. And still no luck on the title either.

    I'll keep trying and report back, hope someone can pitch in!

    Thanks!

  3. Web Aesthetics
    Member
    Posted 1 year ago #

    This is the css I used to make the background responsive

    body.custom-background {
    background-attachment: fixed;
    background-color: #F1F1F1;
    background-image: url("add your image link here");
    background-position: center top;
    background-repeat: no-repeat;
    background-size: 100%
    }

Topic Closed

This topic has been closed to new replies.

About this Topic