• About
  • Contact
  • Subscribe to Newsletter!
tutvid.com - Reject Mediocrity Reject Mediocrity
  • Photoshop
    • Double Exposure Effect Photoshop Tutorial
      Double Exposure Effect Photoshop Tutorial
    • The HIDDEN Power of Luminosity Masks in PHOTOSHOP CC
      The HIDDEN Power of Luminosity Masks in PHOTOSHOP CC
    • CUT OUT Hair From COMPLEX Background – Photoshop Tutorial
      CUT OUT Hair From COMPLEX Background – Photoshop Tutorial
  • Video Editing
    • POWERFUL TRICK for Cinematic Color Grading (Premiere + Photoshop)
      POWERFUL TRICK for Cinematic Color Grading (Premiere + Photoshop)
    • 15 Premiere Pro Tips And Tricks for Faster Editing!
      15 Premiere Pro Tips And Tricks for Faster Editing!
    • 3 Best NEW Premiere Pro Features of 2019!
      3 Best NEW Premiere Pro Features of 2019!
  • Articles
    • 10 Exceptional Font Pairings for Websites
      10 Exceptional Font Pairings for Websites
    • 10 Tips and 10 Great Font Pairings
      10 Tips and 10 Great Font Pairings
    • Why I Became a Graphic Designer and Photographer
      Why I Became a Graphic Designer and Photographer
  • Web Design
    • Instagram Feed Onto Your Website – Dreamweaver
      Instagram Feed Onto Your Website – Dreamweaver
    • Speeding Up Frontend Development Workflows With SASS
      Speeding Up Frontend Development Workflows With SASS
    • CSS Tutorial: Image Replacement/Link Logo To Homepage
      CSS Tutorial: Image Replacement/Link Logo To Homepage
By Nathaniel Dodson Dreamweaver, Web DesignMay 22, 2013

CSS Tutorial: Image Replacement/Link Logo To Homepage

Advertisement

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.

<a href="http://tutvid.com">Magic Hat Independent Film Festival, Philadelphia</a>

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”.

<a class="header-logo" href="http://tutvid.com">Magic Hat Independent Film Festival, Philadelphia</a>

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:

.header-logo {

}

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:

.header-logo {
display:block;
}

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.

.header-logo {
display:block;
width:506px;
height:119px;
}

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.

.header-logo {
display:block;
width:506px;
height:119px;
background:url(../images/logo.png) no-repeat;
}

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.

.header-logo {
display:block;
width:506px;
height:119px;
background:url(../images/logo.png) no-repeat;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}

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.

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

CSS Tutorial: Image Replacement/Link Logo To Homepage

CSS Tutorial: Image Replacement/Link Logo To Homepage

 

Follow Me On Twitter!

Like Tutvid on Facebook!

Tags

CSS Image ReplacementDreamweaver CS6 TutorialLink Logo

Share on

  • Facebook
  • Twitter
  • Pinterest
  • Google +
  • LinkedIn
  • Email
Advertisement
Previous articleDrop Cap Effect w/ :first-letter – CSS3 Tutorial
Next articleSpeeding Up Frontend Development Workflows With SASS
Ad

Popular Right Now

  • PHOTOSHOP: Sucked into smartphone photo manipulation tutorial
    Photoshop PHOTOSHOP: Sucked into smartphone photo manipulation tutorial
  • Athlete Running Energy PHOTO MANIPULATION Photoshop Tutorial
    Photoshop Athlete Running Energy PHOTO MANIPULATION Photoshop Tutorial
  • HIDDEN PHOTOSHOP TRICKS (Ten of them!)
    Photoshop HIDDEN PHOTOSHOP TRICKS (Ten of them!)
  • Fast & POWERFUL Way to Erase a Background in Photoshop! (Background Eraser Tool in Photoshop)
    Photoshop Fast & POWERFUL Way to Erase a Background in Photoshop! (Background Eraser Tool in Photoshop)
  • Color Grading in Photoshop CC (TIPS & TRICKS!) works for Photography & VIDEO!
    Photoshop Color Grading in Photoshop CC (TIPS & TRICKS!) works for Photography & VIDEO!

Subscribe & Follow

Like On Facebook

Tutvid.com
Ad
All Content © Tutvid.com 2019 - Philadelphia, PA
Back to top