{"id":2017,"date":"2016-08-22T21:11:54","date_gmt":"2016-08-22T21:11:54","guid":{"rendered":"http:\/\/cssreset.com\/?p=2017"},"modified":"2016-08-22T21:11:54","modified_gmt":"2016-08-22T21:11:54","slug":"using-css-to-replace-content-with-an-image","status":"publish","type":"post","link":"https:\/\/cssdeck.com\/blog\/using-css-to-replace-content-with-an-image\/","title":{"rendered":"Using CSS to Replace Content with an Image"},"content":{"rendered":"

Often there are times when, as a developer or designer, you might prefer to use an image rather than an HTML element to represent something — particularly if you’re dealing with text. Using an image lets you have more font variety and more control over the design, but the drawback is that search engines like Google can’t read the text of an image. Luckily, there’s a little trick to get around this problem: using CSS’s text-indent property, you can hide the HTML text from view while inserting the image as part of the background.<\/p>\n

Let’s say you want to try it out with a logo. You’ll start with text, like this h2 tag:<\/p>\n

\r\n\r\n\t\t
\r\n\r\n\t\t
\r\n\t\t\t\t\t\t< View plain text<\/span> ><\/a>\r\n\t\t\t\t\t<\/div>\r\n\r\n\t\t
HTML<\/div>\r\n\r\n\t\t\r\n\t\t
\r\n\r\n\t<\/div>\r\n\t\r\n\t
\r\n\t\t
  1. <h2<\/span>><\/span>CSSReset<\/<\/span>h2<\/span>><\/span><\/div><\/li>\n<\/ol>\t<\/div>\r\n\r\n<\/div>\r\n\n

    \"Screen<\/p>\n

    To replace the text with a logo image, use a negative text indent value (it has to be a pretty high value, like the one below) and insert the image using background: url(). Make sure you define the width and height as well, or the image won’t render.<\/p>\n

    \r\n\r\n\t\t
    \r\n\r\n\t\t
    \r\n\t\t\t\t\t\t< View plain text<\/span> ><\/a>\r\n\t\t\t\t\t<\/div>\r\n\r\n\t\t
    css<\/div>\r\n\r\n\t\t\r\n\t\t
    \r\n\r\n\t<\/div>\r\n\t\r\n\t
    \r\n\t\t
    1. h2{<\/span><\/div><\/li>\n
    2. color<\/span>:<\/span> #fff<\/span>;<\/span><\/div><\/li>\n
    3. text-indent<\/span>:<\/span> -9999px<\/span>;<\/span><\/div><\/li>\n
    4. background<\/span>:<\/span> url<\/span>(<\/span>"cssreset.gif"<\/span>)<\/span> no-repeat<\/span>;<\/span><\/div><\/li>\n
    5. width<\/span>:<\/span> 500px<\/span>;<\/span><\/div><\/li>\n
    6. height<\/span>:<\/span> 200px<\/span>;<\/span><\/div><\/li>\n
    7. }<\/span><\/div><\/li>\n<\/ol>\t<\/div>\r\n\r\n<\/div>\r\n\n

      Share and Enjoy !<\/h3>
      0<\/span><\/span>Shares<\/small><\/div>
      <\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"

      Often there are times when, as a developer or designer, you might prefer to use an image rather than an HTML element to represent something — particularly if you’re dealing with text. Using an image lets you have more font […]<\/p>\n

      Read Article<\/a><\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/2017"}],"collection":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/comments?post=2017"}],"version-history":[{"count":2,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/2017\/revisions"}],"predecessor-version":[{"id":2020,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/2017\/revisions\/2020"}],"wp:attachment":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media?parent=2017"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/categories?post=2017"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/tags?post=2017"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}