Hiding Text and Image Replacement

Hack or Fix 89 views
+1
0 Flares 0 Flares ×

A common task is hiding an element’s text and displaying an image using the CSS background property instead. It’s often used on logos, buttons, etc.

@mixin

@mixin hide-text{
    overflow:hidden;
    text-indent:-9000px;
    display:block;
}

Usage

.logo{
    background: url("logo.png");
    height:100px;
    width:200px;
    @include hide-text;
}
Provided by: Sacha Greif
Tagged with: ,
Posted in Sass

Discuss:

Leave a Reply

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

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

No Trackbacks.

Login

Register | Lost your password?
0 Flares Twitter 0 Facebook 0 Google+ 0 0 Flares ×