Replacing H1 text with a logo image

I want to have my site logo displayed as an H1 element on my page with HTML and CSS. Also, I need 开发者_运维技巧the image to be made smaller with CSS to be in keeping with my page. How can I go about doing this?

Can anyone help?

Thanks in advance, Callum

That's how you can do:

html:

<h1 class="logo">My Company</h1>

CSS:

h1.logo{
  display:block;
  width: 300px;
  height: 200px;
  background: url(images/logo.png) 0 0 no-repeat;
  text-indent: -20000px;
}

HTML:

<h1 class="logo">My Logo Text for SEO</h1>

CSS:

.logo { background:url(path/to/image.gif) 0 0 no-repeat; display:block; height:50px; overflow:hidden; text-decoration:none; text-indent:-9999em; width:50px; }

<h1 style="background-image:url('file.jpg')"></h1>

You can set the background of the element to an image in CSS:

h1
{
    background-image: url('Images/Logo.png');
    background-repeat: no-repeat;
}

It would probably better to assign an id to the h1 tag and reference the element by id in the css, or use a class if it can apply to more than one h1 tag.