Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS Framework Basics Build a Website with Bootstrap Building the Navbar

Oliver Gibbs
Oliver Gibbs
9,771 Points
Posted by Oliver Gibbs
Oliver Gibbs
9,771 Points

Why use image replacement techniques for the navbar?

In the FrameWork Basics course Guil uses an 'image replacement technique' to replace a link in the navbar with a logo. What's the advantage of doing this over just putting in the image in the usual way? I'm guessing there's a good reason but this seems an overly complicated way to just add a logo.

Here's the code from the CSS:

.main-logo {
    width: 124px;
    height: 34px;
    margin-top: 22px;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    background: url('../img/main-logo.png') no-repeat;
    background-size: 100%;

6 Answers

James Anwyl
.a{fill-rule:evenodd;}techdegree seal-36
James Anwyl
Full Stack JavaScript Techdegree Graduate 49,960 Points

I believe its done for SEO purposes as search engines can read text but not images. Its kinda like adding an alt tag to an img with html.

As for advantages over using an image the usual way I'm not really sure, makes your html look cleaner maybe?

Bryn Humphreys
Bryn Humphreys
26,472 Points
Bryn Humphreys
Bryn Humphreys
26,472 Points

I think it is for screen readers to be able to read what we are seeing and to improve (customise) the look of foundations top-bar? I'm a little confused on this one also. I tried it in a project I am working on and it isn't very responsive I keep having to refresh the page as it keeps resizing on me.

Bryn Humphreys
Bryn Humphreys
26,472 Points
Bryn Humphreys
Bryn Humphreys
26,472 Points

I think it is for screen readers to be able to read what we are seeing and to improve (customise) the look of foundations top-bar? I'm a little confused on this one also. I tried it in a project I am working on and it isn't very responsive I keep having to refresh the page as it keeps resizing on me.

Sean Cooper
Sean Cooper
8,346 Points
Sean Cooper
Sean Cooper
8,346 Points

Using the background-image css property will also allow you to customize an image in various ways like cover, contain, etc. In this particular case, that won't be necessary but I assume it is out of habit and for a cleaner html appearance.

Nijad Kifayeh
Nijad Kifayeh
6,092 Points
Nijad Kifayeh
Nijad Kifayeh
6,092 Points

I'm also guessing it's for screen-reader and SEO purposes, but I wish a MOD would chime in to confirm.

Ruxandra Chirea
Ruxandra Chirea
12,764 Points
Ruxandra Chirea
Ruxandra Chirea
12,764 Points

Compared to just putting an alt tag, is there any advantage with using this technique as far as SEO and screen-readers are concerned?