WordPress.com Forums » Topic: Adding a Larger Header Image to Manifest Theme

chemblack on "Adding a Larger Header Image to Manifest Theme"

chemblack — Mon, 16 Jul 2012 18:21:26 +0000

Thank you so much! I went with the second option, and now feel free to have my artist create my images.

designsimply on "Adding a Larger Header Image to Manifest Theme"

designsimply — Mon, 16 Jul 2012 15:56:05 +0000

Your image is larger than the container area width, so you have two options: either make the image smaller or make the width of the site larger. Also, if you put the background image on the link instead of #site-title, then the header image will still be clickable.

To make the image smaller:

#site-title a {
	display: block;
	background:url('http://cheblackdotcom.files.wordpress.com/2012/07/sample-header.png?w=500') no-repeat scroll center top transparent;
	width:500px;
	height:168px;
	margin-top:0;
	text-indent: -9999px;
}

Or to make the width bigger:

#site-wrapper,
#main-nav ul ul,
#core-content,
#comments h3,
legend span,
#footer,
.footer-content {
	width: 892px;
}
#site-title a {
	display: block;
	background:url('http://cheblackdotcom.files.wordpress.com/2012/07/sample-header.png') no-repeat scroll center top transparent;
	width:892px;
	height:301px;
	margin-top:0;
	text-indent: -9999px;
}

Note that you may also need to make some additional adjustments to the spacing if you go with the 2nd option such as for the footer widgets, and you will want to update the limit width setting on Appearance → Custom Design → CSS to 892 for that option.

chemblack on "Adding a Larger Header Image to Manifest Theme"

chemblack — Fri, 13 Jul 2012 16:20:07 +0000

I was able to add a larger heading image and remove the title text using the following code:
#site-title { background:url('http://cheblackdotcom.files.wordpress.com/2012/07/sample-header.png') no-repeat scroll center top transparent; height:301px; width:892px; margin-top:0; }

h1#site-title a { display:none; }

However I am having trouble center aligning the image with my site.

chemblack on "Adding a Larger Header Image to Manifest Theme"

chemblack — Fri, 13 Jul 2012 15:45:22 +0000

Hi All;

I am trying my hand at CSS for the first time but nothing is working. I want to add a large header image that will replace the header text. From what I understand, I would take the custom CSS and paste it directly into the CSS style sheet editor, completely alone, and it would override the existing Manifest CSS. The code I am using is

#header-image a img {
display: none;
}
#header-image {
display: block;
margin: 0 auto;
background: url(MEDIA LIBRARY URL*) no-repeat;
width: 500px;
height: 500px;
}

but when I pasted this in with the correct URL and saved, nothing on my site changed.

What am I doing wrong?