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

Posted by orange sky
.a{fill-rule:evenodd;}techdegree
orange sky
Front End Web Development Techdegree Student 4,945 Points

what is the purpose of image replacement?

Hello,

I am using boostrap and I have some questions concerning image replacement technique:

1) The link has a text "Ribbit", I dont see the point of writing text just to cover it with an image. What is the purpose of an image replacement technique?

2) I notice an image replace always come with overflow-hidden and white-space:no-wrap. I cant understand the need for (overflow-hidden and white-space:no-wrap) when the actual text, "Ribbit" is so small. When does (overflow-hidden and white-space:no-wrap) come into play during an image-replacement?

thanks

.main-logo{

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


     }


    <!--Navbar -->
    <div class="navbar navbar-default navbar-fixed-top">
      <div class="container">
          <a href="#" class="main-logo pull-left" href="#">Ribbit</a>
          <p class="navbar-text pull-right hidden-xs">A Treehouse Project</p>
      </div>
    </div><!-- End navbar -->

4 Answers

Garrett Sanderson
Garrett Sanderson
12,735 Points
Garrett Sanderson
Garrett Sanderson
12,735 Points

The text is placed there incase for some odd reason that a browser doesn't display the logo background image. If the image doesn't display then the text "ribbit" will appear so there is at least something occupying that space.

Garrett Sanderson
Garrett Sanderson
12,735 Points
Garrett Sanderson
Garrett Sanderson
12,735 Points

White Space no wrap tells the text to never wrap no matter what. So that you don't get something like this:

hel

lo

when you really want " hello "

The overflow property tells the browser how to display content within another element. So you have a div that has a background color and you haven't specified its height then the content will run past the color as seen here:

http://css-tricks.com/the-css-overflow-property/

Overflow: hidden and white-space: no-wrap make for absolute certainty the content won't display awkwardly.

Hopefully this helps.

orange sky
seal-mask
.a{fill-rule:evenodd;}techdegree
orange sky
Front End Web Development Techdegree Student 4,945 Points
orange sky
.a{fill-rule:evenodd;}techdegree
orange sky
Front End Web Development Techdegree Student 4,945 Points

Oh, I suppose that can happen so it best to take actions beforehand, ok got it, but what about #2

2) I notice an image replace always come with overflow-hidden and white-space:no-wrap. I cant understand the need for (overflow-hidden and white-space:no-wrap) when the actual text, "Ribbit" is so small. When does (overflow-hidden and white-space:no-wrap) come into play during an image-replacement?

Cheers!

orange sky
seal-mask
.a{fill-rule:evenodd;}techdegree
orange sky
Front End Web Development Techdegree Student 4,945 Points
orange sky
.a{fill-rule:evenodd;}techdegree
orange sky
Front End Web Development Techdegree Student 4,945 Points

Hello Garret,

Totally well explained, but in the case above, why bother writing (overflow-hidden and white-space:no-wrap) when we have given a text-indent:-9000px. A text-indent removes all text and images, so I feel, but I am not sure, that these 2 styles, (overflow-hidden and white-space:no-wrap)are pointless. I dont know...

Cheers!!