CODEWITHSUNDEEP
htmlcss
Alex Buznik
Alex Buznik

Reputation: 696

Image replacement with font-size: 0

I really like to kill text for image replacement with font: 0/0 a, but as I know it does not really work everywhere.

So do we still need

text-indent: -9999px;
overflow: hidden;

for this?

Upvotes: 1

Views: 1790

Answers (2)

Tommy Bjerregaard
Tommy Bjerregaard

Reputation: 1099

Updated

You can replace the image with a background and use padding to move the actual image away. This is just one of many solutions.

http://jsfiddle.net/gj5F2/2/

Css

div
{
    width: 550px;
    height: 190px;
    overflow: hidden;
}
.img2
{
    background: url('http://www.google.com/logos/2013/ghana_independence_day_2013-1202005-hp.jpg') no-repeat left top;
    padding-left: 550px;
}

HTML

<img class="img1" src="http://www.google.dk/images/srpr/logo4w.png" width="550" height="190" />

<div>
    <img class="img2" src="http://www.google.dk/images/srpr/logo4w.png" width="550" height="190" />
</div>

Upvotes: 1

cimmanon
cimmanon

Reputation: 68349

As Mr Lister commented, there are many, many different ways to do image replacement. There are up and down sides to all of them. There is one technique where the only real down side is that it requires support for psuedo elements (so IE8+).

  • No extra markup
  • Works with images disabled
  • Works with transparent images
  • Does not require adjustment of font-size
  • Does not require messing with positioning

http://nicolasgallagher.com/css-image-replacement-with-pseudo-elements/

.nir {
   height:100px; /* height of replacement image */
   width:400px; /* width of replacement image */
   padding:0;
   margin:0;
   overflow:hidden;
}

.nir:before {
   content:url(image.gif);
   display:inline-block;
   font-size:0;
   line-height:0;
}

Upvotes: 1

Related Questions