This will help if you're trying to replace the existing header image that's below the main menu:
http://en.forums.wordpress.com/topic/header-image-in-pilcrow-distorted-after-css-edit?replies=3#post-845227

If you want to add the image above the main menu, the CSS you tried adding already should work if you go to the Appearance → Header page in your blog dashboard and make sure the "Show header text with your image" option is checked.

You will probably also want to change the "#site-title" selector to "#site-title a" and add a few other properties such as display, width, and text-align. Here is a modified example to get you on the right track:

#site-title a {
	background: url('http://ourcommunityfoodprojects.files.wordpress.com/2013/03/30413-ocfp-logo-1-640x195.jpg') no-repeat;
	height:169px;
	width: 640px;
	display: block;
	text-align: left;
	text-indent: -9999px;
}

div#header h1 img {
	display: none;
}
div#header h1,
div#blog-description {
	padding-left: 40px;
	width: 710px;
}
#blog-title {
	background: url('http://s.wordpress.org/about/images/logos/wordpress-logo-32-blue.png') left center no-repeat;
}

Change the url() value to the image you'd like to use and then adjust the padding-left and width values based on your new image size.

2. Have the text "download" where the pages go, but clicking on it will download a file that is on my server

This sounds like simply adding a link:
http://en.support.wordpress.com/links/

If the file is an accepted file type, you can add it to your blog's image library.
http://en.support.wordpress.com/accepted-filetypes/

Otherwise, you'll need to upload the file to your own server and then copy down the appropriate link address to use when you create a link in your blog.

1. Place an image that is 342x342 where the title is and remove the title

Try using this technique to change out the header image:
http://en.forums.wordpress.com/topic/change-header-in-manifest-theme?replies=3#post-854179

The site is ourcommunityfoodprojects.wordpress.com

A link to the logo is: http://ourcommunityfoodprojects.files.wordpress.com/2013/03/30413-ocfp-logo-1-640x195.jpg

Thank you in advance for patience and advice!

Appreciate the help, thanks.

Sharon

h1 a {
	display: block;
	width:250px;
	height:102px;
	background-image:url('http://mka4h2013.files.wordpress.com/2013/02/bright-logobground-copy.jpg') no-repeat -20px;
	text-indent:-9999px
}

Try replacing it with this instead:

.site-title a {
	display: block;
	width: 500px;
	height: 205px;
	background: url('http://mka4h2013.files.wordpress.com/2013/02/bright-logobground-copy.jpg') no-repeat;
	text-align: left;
	text-indent: -9999px
}

Use ".site-title" instead of "h1" because it's more specific. With your first rule, any time an h1 element was used as a link, it would get replaced. Also, you were using "background-image" but if you have more than one thing listed (such as "no-repeat") in that line, you should use "background" instead. I also adjust the the width and height values to match the width and height of the image you provided.

It looks like the image has some extra spacing around it you might not want. If so, you should remove the extra spacing saved inside the image and re-upload it. Then adjust the width, height, and url() values in the CSS example above to match the new image.

You can use an image replacement like this:

#categories-2 .widget-title {
background: url(http://s.wordpress.org/about/images/logos/wordpress-logo-32-blue.png) 15px 0 no-repeat;
display: block;
width: 36px;
height: 36px;
text-alignment: left;
text-indent: -9999px;
border: 0;
}

Note that you need to look in the page source code to see which selectors to use. In this example, "#categories-2" refers to the categories widget in your sidebar. Each widget gets a unique ID after it is added. You will need to use the same code for the archives widget.

I used a WordPress logo as an example image. To use a different image, replace the url() value with an image from your media library and adjust the width and height to the exact size as your image.

.widget-title {
display: none;
}

That should remove the "Archives'" and "Categories'" title text. This command will affect any widgets you add to your sidebar, so in the future, if you want widget titles to appear you will have to remove this from the CSS Stylesheet Editor.

Adding unique images to replace individual widget titles is, likewise, impossible without altering the HTML code because all of the widget titles are linked under the same HTML tags (only a single image would show up for all of the widgets, opposed to a unique image for each widget). However, what you could do to insert your unique images is simply add two more "Image" widgets to your sidebar (your "Categories" image directly above the "Categories" widget, and your "Archives" image directly above the "Archives" widget and directly below the "Categories" widget). While these images wouldn't technically be the titles of your "Archives" and "Categories" widgets, they would at least appear to be the titles for anyone visiting your blog.

I hope this helps, and let me know if it doesn't or if you have any more questions.

Thanks for your response. I am very new to all this! Yes, my goal is to replace the MK Arts for Health text with the logo

Here is the URL

http://mka4h2013.files.wordpress.com/2013/02/bright-logobground-copy.jpg

Instead, we should look at your blog specifically. I see that you are currently using the Misty Lake theme at the http://mka4h2013.wordpress.com/ blog. Is your goal to replace the "MK Arts for Health" text with a logo?

Can you upload the logo you'd like to use into your media library and include the URL for the image in your reply?

@asqewcreativ, you are currently using the Twenty Eleven theme at http://asqew-creative.com/ and you can use the following CSS example to replace the site title in the Twenty Eleven them with a logo:

#site-title a {
	background: url('http://huntergatherermedia.files.wordpress.com/2013/02/logo2013ul.png?w=400') left top no-repeat;
	display: block;
	text-alignment: left;
	text-indent: -9999px;
	width: 400px;
	height: 168px;
}

Note that CSS can be added to the Appearance → Custom Design → CSS page in WordPress.com blogs.

I am not sure how to change add an image within there but it gives you the starting base.

CSS newbie here! Thanks!

I am trying to replace the title on my site with our logo. I have found this bit of code and replaced the image url with the url for an image in my media library

#logo h1 a {<br /> display: block;<br /> width: 960px;<br /> height: 184px;<br /> background: url(http://2.bp.blogspot.com/-kW2FgrXslxk/Tzl73SZFzcI/AAAAAAAAALQ/8Jj66Wh2MLA/s1600/Header5.png) no-repeat -20px;<br /> text-indent: -9999px;<br /> }<br /> #header {<br /> padding-bottom: 0;<br /> }

but it doesn't seem to work! It removes the title and creates the right space for the logo - but no logo appears. The template I am using is misty lake.

Thanks!

loogo here: http://wp.me/a23Zoz-bD

If you are referring to a Custom Header, many themes support using one. http://theme.wordpress.com/themes/features/custom-header/