Photograph logo as a heading WordPress

Brian Richards answers:

It's actually simpler than you would think:

1) upload your image to your webserver (i suggest you put it in the theme folder itself)
2) place this image tag where you want the image to appear: <img src="/path/to/image.jpg" />

if you put the logo in the images folder in the autofocus folder, the path might be: /wp-content/themes/autofocus/images/

Make sense?

Andrzej answers:

What you need to do is to make CSS change:

- first, go to FTP wp-content/themes/autofocus (or where your theme is located) and copy your image there (you might put it into 'images' subfolder or wherever you want)
- then, open style.css file (located in your theme directory), and add:
#header {
background-image:url(your-image-name.jpg);
background-repeat:none;
background-position:0px 0px;
}
- If your image is in subfolder, simply include this subfolder image name, i.e.: background-image:url(images/your-image-name.jpg);
- If you want to manipulate the position where you image resides, play with background-position:0px 0px;. First property is X axis sencond one Y.
- If you want move header text a bit right, add:
#header h1 {margin-left:40px;}
You can change 40px to value that fits your needs.
If you want to remove the text completely, add:
#header h1 {text-indent:-99em;overflow:hidden;}

hidden doco comments:

Hi, thank you so much for explaining this. I am just wondering what the url is for the image now that it is in my themes folder? Do I need to include something where the 'url' is and then remove the brackets around (your-image-name.jpg)?

background-image:url(your-image-name.jpg)

I apologise if this question is very simple, I am just completely new to wordpress.

Cheers,

hiddendoco

Andrzej comments:

Hey,
No - just replace the url as it so, so:

if your file name is:

myLogo.jpg ---> background-image: url(myLogo.jpg);
images/myLogo.jpg ---> background-image: url(images/myLogo.jpg);
my-logo-file.jpg ---> background-image: url(my-logo-file.jpg);

remeber to keep upper and lower case same as you have them in your FTP

Oleg Butuzov answers:

Take look to Nicole answer. this is almost corrent .

but simple markup error in code

<h1 id="blog-title"><a href="<?php echo get_option('home') ?>/" title="<?php bloginfo('name') ?>" rel="home"><img src="pathtoimg.jpg" width="XXX" height="XXX" alt="<?php bloginfo('name'); ?>" id="logo" /></a></h1>

she is winner in this post.

Ehthisham tk answers:

image source
<img src="<?php bloginfo('template_url'); ?>/images/logo.png" border="0"/>

put logo in autofocus/images/

Kerry Webster answers:

After looking at the 'autofocus theme' and assuming you want a 595x200 px header (you can use whatever size you want but the theme allows 600px. With the spacing used by the theme, 595px will line up with the first post image.), use the following procedure to accomplish your task. You can see an example of this theme with the changes added at http://beta.kerrywebster.com.

1) Add the following css to the style.css file in the 'autofocus theme' folder. Add it after the /* =header */ section and before /* =nav */ section (approximately line 71-for semantics):

/* =header overrides */
#header { background-image:url(img/hdr01.jpg); background-repeat: no-repeat; background-position: 0 0; margin-top:0px; margin-bottom:5px; height:200px; }
#header h1, div#blog-description { text-indent:-5000%; }

2) Copy your header image to the themes 'img' folder>> 'wp-content/themes/autofocus/img/'. If your image is not named 'hdr01.jpg' make the appropriate change to the 'background-image:url' setting in the css from step 1.

That is essenitially all there is to it. I can supply the base theme's style.css file - with the changes above added - if selected. I can also make any suggested changes to the css based on the specifications of your header image. Again, I was assuming a 595x200 px image. If you have a different size image, need spacing at the top or bottom of the header image, need a repeating image or any minor specification change let me know.

Example: http://beta.kerrywebster.com