• About
  • Contact Me
tutvid.com -
  • Photoshop
  • Illustrator
  • Premiere Pro & After Effects
  • Nathaniel Talks
Dreamweaver, Web DesignMay 22, 2013<March 4, 2014

CSS Tutorial: Image Replacement/Link Logo To Homepage

by Nathaniel Dodson

Video

 

1. Start By Writing H1 Tags

We want to wrap our link in an h1 tag to let search engines know that the text in our link (which will be replaced by an image) is very important text. Drop an opening and closing h1 tag where you want the logo to appear.

CSS Tutorial: Image Replacement/Link Logo To Homepage

2. Place Our Link

We now need to code in our link within our h1 tag. Check out my code. NOTE: I’ve placed the company name and geo-tagged “Philadelphia” in the text in our link. This is a great line for SEO.

[code type=”css” title=”Code”]Magic Hat Independent Film Festival, Philadelphia[/code]
CSS Tutorial: Image Replacement/Link Logo To Homepage

3. Add Our Class

The next step is to place a class on our anchor tag (our link). I’m going to make up a new class and call it “header-logo”.
[code type=”css” title=”Code”]Magic Hat Independent Film Festival, Philadelphia[/code]

CSS Tutorial: Image Replacement/Link Logo To Homepage

4. Start Writing The CSS

We are going to target our class using CSS. Check out my code below:
[code type=”css” title=”Code”].header-logo {

}[/code]

CSS Tutorial: Image Replacement/Link Logo To Homepage

5. Display:Block

We need to take our inline element (our link) and convert it to a rock solid “block level element” which we can size and set an exact background to. Check out my updated code below:
[code type=”css” title=”Code”].header-logo {
display:block;
}[/code]

CSS Tutorial: Image Replacement/Link Logo To Homepage

6. Set The Width & Height

Now that we have a block level element we can set our link (which you can now think of as a box) to have the exact width and height of our logo file. Go check out the width and height of your logo and set a width and height in CSS for the class. As of right now, we still don’t have a logo image, but this will start to constrain our text within this invisible box.
[code type=”css” title=”Code”].header-logo {
display:block;
width:506px;
height:119px;
}[/code]

CSS Tutorial: Image Replacement/Link Logo To Homepage

CSS Tutorial: Image Replacement/Link Logo To Homepage

7. Set Background Image

It’s time to drop in our logo image. Setting a background image for our “a” tag is a breeze with CSS.
[code type=”css” title=”Code”].header-logo {
display:block;
width:506px;
height:119px;
background:url(../images/logo.png) no-repeat;
}
[/code]
CSS Tutorial: Image Replacement/Link Logo To Homepage

CSS Tutorial: Image Replacement/Link Logo To Homepage

8. Text Must Disappear

Using a method developed by Scott Kellum[http://scottkellum.com/], we will push this type out of the way so we can see our image, but hide the type. We’re going to set our text to be indented 100%. This will always make sure our type is outside of the logo. The white-space:nowrap will ensure that our text doesn’t wrap around to a new line. Overflow:hidden ensures that once the text is pushed outside of our invisible box, it’ll be hidden.
[code type=”css” title=”Code”].header-logo {
display:block;
width:506px;
height:119px;
background:url(../images/logo.png) no-repeat;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}[/code]

CSS Tutorial: Image Replacement/Link Logo To Homepage

CSS Tutorial: Image Replacement/Link Logo To Homepage

9. Center The Logo

The last step here will be to center this logo using CSS. Set the margin as I have in CSS and check out the results. This is a simple, no-nonsense way to quickly and effectively place your logo, or other image, using CSS.
[code type=”css” title=”Code”].header-logo {
display:block;
width:506px;
height:119px;
background:url(../images/logo.png) no-repeat;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
margin:0 auto;
}[/code]

CSS Tutorial: Image Replacement/Link Logo To Homepage

CSS Tutorial: Image Replacement/Link Logo To Homepage

 

Follow Me On Twitter!

Like Tutvid on Facebook!

Nathaniel Dodson
Written By
Nathaniel Dodson
More from Nathaniel Dodson
The Extract Filter – Photoshop CS2
The Extract Filter In Photoshop CS2 Learn how to make and use...
Read More
Join the Conversation

49 Comments

  1. says: Alu
    May 26, 2013 at 7:11 am

    Will the logo also be printed in this way? I remember some issues, when you wrap an image as a background with CSS, that it will not be printed out.

    Reply
  2. says: SapioIT
    June 9, 2013 at 4:28 am

    How did you made that hole under the logo? I think you should do a tutorial for that too…

    Reply
    1. says: ceed
      May 9, 2014 at 7:21 am

      Use Png 😉

      Reply
      1. says: SapioIT
        June 14, 2014 at 7:08 pm

        … That wouldn’t be complety CSS…

        Reply
  3. says: meserlian
    August 3, 2013 at 5:36 pm

    It would also help if you place the logo as an img tag with an alt text and add your keywords there to.

    Actually, I believe as a rule of thumb, you should always have a logo as an img tag on page, you would still able to achieve this tutorial as well (hiding the text).

    Reply
  4. says: Ceed
    May 9, 2014 at 7:20 am

    Clear & direct 🙂 Tx

    Reply
  5. says: Yiannis
    May 16, 2014 at 4:44 am

    that was awesome!

    Reply
  6. says: Umair Ulhaque
    May 26, 2014 at 8:27 am

    Hi Nathaniel,

    I have been following this tutorial since I knew the trend of css image replacement by -9999px has become old, so I followed this. I have a little question here what if we use the same technique by making our logo container absolute in a parent div which position is relative? Is that okay for the same seo and accessibility purpose?

    Many thanks.

    Reply
  7. says: Al Rios
    November 18, 2014 at 4:56 pm

    Hi, having issues with CSS Image Placement… When I add to my code “Villas de Costa Mar vacation rentals, Dorado Puerto Rico” my log images do not resize when in tablet or phone size?

    below is my CSS code:

    header a.logo { display: block; position: absolute; background-position: 0px 0px; background-repeat: no-repeat; text-indent: 100%; white-space: nowrap; overflow: hidden; }

    @media screen and (max-width: 990px)
    }

    header a.logo { width: 354px; height: 281px; top: 35px; left: 20px; background-image: url(../_img/logo-large.png); margin-top: -45px; margin-left: -40px; margin-bottom: 5px; }
    Any help or direction would be greatly appreciated, Thank you for sharing your knowledge!

    Reply
  8. Pingback: https://tribot.org/
  9. Pingback: Dragon Ball Super Episode 23
  10. Pingback: sandoz omnitrope reviews
  11. Pingback: bespoke sofa
  12. Pingback: how to stop slicing my driver
  13. Pingback: Live draw hongkong
  14. Pingback: Disposable SMS Number
  15. Pingback: Economics Tuition
  16. Pingback: Kenneth Oshiro
  17. Pingback: ayam laga
  18. Pingback: texas holdem poker free game
  19. Pingback: the flash gta 5 mods
  20. Pingback: Buy Drugs Without a Prescription
  21. Pingback: семейные ценности
  22. Pingback: Mike Larrison
  23. Pingback: Costa Rica Itinerary 8 days
  24. Pingback: satta matka
  25. Pingback: Margaret Cunniffe is an Australian Fraudster based in Melbourne Victoria who abuses those closest to her to achieve her selfish objectives.
  26. Pingback: Agen Bandarq
  27. Pingback: yandex ankara
  28. Pingback: yandex ankara
  29. Pingback: قاب سامسونگ
  30. Pingback: methyl tren oral
  31. Pingback: ICQ Chat
  32. Pingback: yandex ankara
  33. Pingback: www.akan.co
  34. Pingback: klettersteigset info
  35. Pingback: fat burner clenbuterol
  36. Pingback: venus factor
  37. Pingback: Australian Business Directory
  38. Pingback: seo agency
  39. Pingback: Motogolf
  40. Pingback: Internet Services in Australia
  41. Pingback: free video chat adult
  42. Pingback: Bitcoin Marketplace
  43. Pingback: kitchenhelpband.com
  44. Pingback: Best Newspaper in India
  45. Pingback: Best Magazine in India
  46. Pingback: Happy wheels 3
  47. Pingback: home page
Leave a comment
Leave a commentCancel comment

Your email address will not be published. Required fields are marked *

Signup for my newsletter!

Content Calendar

February 2023
S M T W T F S
 1234
567891011
12131415161718
19202122232425
262728  
« Jan    

Follow me on social media!

All content © tutvid.com 2022 - Philadelphia, PA
Back to top
  • Photoshop
  • Illustrator
  • Premiere Pro & After Effects
  • Nathaniel Talks
  • About
  • Contact Me