Changing my h1 to a background image logo

**surfinggoofy** · May 12, 2009, 04:40

Hi

I am in the early stages of designing my site using only XHTML and CSS. Up til now my <h1> has been the branding of my site i.e. the website name using the fonts, colours, padding etc. that are appropriate.

However, it does still look amateurish, and I now want to create a company logo in photoshop. Doing that doesn't cause me difficulty, but it's the sizing of it so that it 'fits' the rest of the site that I'm unsure about.

I currently have both float: left and float: right for vertical navigation (spaced in em's) and body content with left and right margins to fit inside the left and right navigation.

I'll get to the point. How do I size the logo? Is it by using set pixel width and height values? If so, how would I know that this would be able to be viewed by all potential users of the website (different screen sizes etc.)? Also, if I do use set pixel values, would I then have to set the pixel width values of the <body> element so that everything lines up?

I'm confused! Any help is much appreciated.

Goofy

**molona** · May 12, 2009, 06:06

You can use ems too. I works wonderfully except in IE where if you don't specify height: auto (or width:auto, if you have specified the height) it may look a bit weird and streched

**surfinggoofy** · May 12, 2009, 06:29

Forgive me if this a stupid response, but this is new to me.

As far as I'm aware, I can only set my image size in Photoshop by pixels, inches, cms, mms, points, picas or columns (I have only ever used pixels). I don't understand how to size it.

Are you saying that sizing in Photoshop doesn't matter and that I should use CSS to set the <h1> i.e. h1 { width: 100em;} or whatever?

Thanks

**molona** · May 12, 2009, 08:10

I am not talking about photoshop, but about CSS. You simply need to do the image big enough to look good in the biggest size possible.

Yes, you can use relative measures to keep it proportional to the rest of the design. Give it a try!

PS: 100em would be waaaaay too much... a normal screen size is about 60-65em wide

And the question is not stupid at all. It was two years ago, some other mentor or advisor, I am not sure who, that told me to try this and he provided some examples. I did my tests and it works great.

**Dan Schulz** · May 12, 2009, 10:04

Since you're creating a logo, use the IMG element, and save your H1 heading for the top-level heading of each individual page.

**Knicksfan77** · May 12, 2009, 10:09

Dont forget that search engines look hard at your H1 tags for SEO. H1 tags should always include keywords most revelant to the individual page. Only use one H1 per page

**molona** · May 12, 2009, 10:14

Originally Posted by Dan Schulz

Since you're creating a logo, use the IMG element, and save your H1 heading for the top-level heading of each individual page.

Off Topic:

Wasn't you that posted something about using ems? I don't remember where I got the idea... but I think that it was a "Dan"... and I don't think it was Dan Grossman...

**Dan Schulz** · May 12, 2009, 10:28

for general layouts, yes - but not logos

Unless it was a few years ago when I didn't know any better.

**molona** · May 12, 2009, 10:34

Then I must be mistaken. I use it with images and it works very well, except in the case of IE that tends to change the proportions if you don't use both height and width.

**surfinggoofy** · May 12, 2009, 11:27

Originally Posted by Dan Schulz

Since you're creating a logo, use the IMG element, and save your H1 heading for the top-level heading of each individual page.

This makes sense to me Dan, however all the tutorials I have been using so far have the h1 as what effectively becomes the company logo / branding. This includes Ian Lloyds book.

If I was to do as you suggest, would I simply have something along the lines of <div id="logo"><p></p></div> and style that div with a background image etc. as the first div inside the body element?

Then I'd just be using the h1 as the first heading on each page, as its name would suggest.

As an aside, a couple of my pages use the caption element above a table (containing tabular data), rather than an h1 (or an h2 in my case because of my previous mistake). Is this a bad idea from a SEO perspective.

Thanks all for the advice.

**Dan Schulz** · May 12, 2009, 12:34

This is what I'd do:

HTML Code:

<div id="header">
     <img src="/themes/themename/images/logo.png" width="200" height="80" alt="Web Site Name">
</div>

Of course the attribute values are placeholders. You'll have to replace them with your own actual content.

And to answer your aside, no, it's not bad. It still provides a benefit to users that need it, so as long as you put your users' needs first, you'll be fine.

**surfinggoofy** · May 13, 2009, 03:56

Thanks all. I'm getting there...but it's slow progress!

**Black Max** · May 13, 2009, 19:22

I'm using this technique from Paul. After some tweaking (and querying in the forums), it works beautifully on my site. Don't know if this is what you're looking for, but it's a neato keeno technique.

The SitePoint Forums have moved.

User Tag List

Thread: Changing my h1 to a background image logo

Thread Tools

Display

Changing my h1 to a background image logo

Bookmarks

Bookmarks

Posting Permissions