CODEWITHSUNDEEP
htmlcss
Callum Whyte
Callum Whyte

Reputation: 2429

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

Upvotes: 0

Views: 7030

Answers (4)

toby
toby

Reputation: 902

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.

Upvotes: 0

void
void

Reputation: 718

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

Upvotes: 0

Naveed Ahmad
Naveed Ahmad

Reputation: 3175

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;
}

Upvotes: 2

Seth
Seth

Reputation: 6260

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; }

Upvotes: 0

Related Questions