Make twentyeleven title image and background responsive

  • hoy

    (@whereskarlo)


    11 years, 6 months 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 🙂

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter hoy

    (@whereskarlo)

    11 years, 6 months 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!

    Web Aesthetics

    (@web_aesthetics)

    11 years, 1 month 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%
    }

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Make twentyeleven title image and background responsive’ is closed to new replies.

Tags