WordPress.com

1. chemblack
   Member
   Jul 13, 2012, 3:45 PM

   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?

   The blog I need help with is cheblack.com.

2. chemblack
   Member
   Jul 13, 2012, 4:20 PM

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

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

3. designsimply
   Staff
   Jul 16, 2012, 3:56 PM

   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.

4. chemblack
   Member
   Jul 16, 2012, 6:21 PM

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

Topic Closed

This topic has been closed to new replies.