Grow your CSS skills. Land your dream job.

Scaling image with text-indent replacement

  • # August 21, 2012 at 8:55 pm

    So I am working on my portfolio site, and have ran across this problem a few times in the past. If I do not use css to have the image as a background, and have the image in the HTML so I can make it scale with the rest of the site, text-indent shifts the image as well.


    Jason Penezich Logo

    .logo {
    float:right;
    text-indent: -9999px;
    height:133px;
    }

    So I guess the question is, what is the best way to have an image be scaling while keeping text in a heading for screen readers/good practice? The simple way I am seeing is simply move the image outside of the heading, but I thought I read somewhere that it is best used inside heading tags, as that is where it belongs.

    # August 21, 2012 at 8:59 pm

    Actually, just solved it myself. I added:

    .logo img {
    float:right;
    max-width:100%;
    }

    This makes the image leave the flow, while still forcing the heading text to exit the page. However if there is a better way to do this, please feel free to explain.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".