{"id":192,"date":"2011-03-06T18:17:02","date_gmt":"2011-03-07T02:17:02","guid":{"rendered":"https:\/\/thatsgravydesigns.com\/design\/?p=192"},"modified":"2011-03-07T21:09:47","modified_gmt":"2011-03-08T05:09:47","slug":"text-over-images","status":"publish","type":"post","link":"https:\/\/thatsgravydesigns.com\/design\/text-over-images\/","title":{"rendered":"Unable to see Text on top of Images?"},"content":{"rendered":"<p><span style=\"font-size: medium; line-height: 24px;\">While viewing web pages with background images, we look at <em>legibility<\/em>. Are the text and images easy on the eye? Does the background <strong>image <\/strong><em>conflict <\/em>with the <strong>text<\/strong> that is on top? It&#8217;s easy to overlook that <strong>text over images<\/strong> is a done deal, however it doesn&#8217;t always work out that way. Soon afterwards we find ourselves second guessing the final result. For example:<\/span><\/p>\n<p><span style=\"font-size: large;\">Before:<\/span><br \/>\n<img loading=\"lazy\" decoding=\"async\" title=\"text over images bad\" src=\"http:\/\/thatsgravydesigns.com\/design\/wp-content\/uploads\/2011\/03\/text-pic_bad.jpg\" alt=\"text over images bad\" width=\"580\" height=\"73\" \/><\/p>\n<p><span style=\"font-size: large;\">After:<\/span><br \/>\n<img loading=\"lazy\" decoding=\"async\" title=\"text over images better\" src=\"http:\/\/thatsgravydesigns.com\/design\/wp-content\/uploads\/2011\/03\/text-pic_better.jpg\" alt=\"text over images better\" width=\"580\" height=\"73\" \/><\/p>\n<p><span style=\"font-size: medium;\">Here the background image is subdued so that the contrast between the image and text adds clarity.<\/span><\/p>\n<ol>\n<li><span style=\"font-size: medium;\">The image had to be slightly skewed at a better angle.<\/span><\/li>\n<li><span style=\"font-size: medium;\">The image was also darkened so that the white text can stand out more.<\/span><\/li>\n<\/ol>\n<p><span style=\"font-size: medium;\">What do you think?<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>While viewing web pages with background images, we look at legibility. Are the text and images easy on the eye? Does the background image conflict with the text that is on top? It&#8217;s easy to overlook that text over images is a done deal, however it doesn&#8217;t always work out that way. Soon afterwards we [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_themeisle_gutenberg_block_has_review":false,"footnotes":""},"categories":[8],"tags":[],"class_list":["post-192","post","type-post","status-publish","format-standard","hentry","category-solutions"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/thatsgravydesigns.com\/design\/wp-json\/wp\/v2\/posts\/192","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/thatsgravydesigns.com\/design\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/thatsgravydesigns.com\/design\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/thatsgravydesigns.com\/design\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/thatsgravydesigns.com\/design\/wp-json\/wp\/v2\/comments?post=192"}],"version-history":[{"count":0,"href":"https:\/\/thatsgravydesigns.com\/design\/wp-json\/wp\/v2\/posts\/192\/revisions"}],"wp:attachment":[{"href":"https:\/\/thatsgravydesigns.com\/design\/wp-json\/wp\/v2\/media?parent=192"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thatsgravydesigns.com\/design\/wp-json\/wp\/v2\/categories?post=192"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thatsgravydesigns.com\/design\/wp-json\/wp\/v2\/tags?post=192"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}