CINXE.COM

<!doctype html>    <html class="no-js" lang="en-US" prefix="og: https://ogp.me/ns#">  <head> <meta charset="UTF-8" /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="icon" href="https://www.flaticon.com/blog/wp-content/themes/freepik-blog/media/img/favicon/flaticon/favicon.ico" type="image/x-icon" /> <link rel="author" href="https://www.flaticon.com/blog/wp-content/themes/freepik-blog/humans.txt" /> <link rel="pingback" href="https://www.flaticon.com/blog/xmlrpc.php" />  <script> AJAX_URL = "https://www.flaticon.com/blog/wp-admin/admin-ajax.php" ACCOUNTS_URL = "https://profile.freepik.com" FREEPIK_USER_URL = "https://www.freepik.com/user/" LANGUAGE = "en" LANGUAGE_NAME = "en" MEDIA_URL = "https://www.flaticon.com/blog/wp-content/themes/freepik-blog/media/img" WP_MEDIA_URL = "https://www.freepik.com/blog/wp-content/uploads" SUPPORT_URL = "https://support.freepik.com/hc/es" SITE_URL = "https://www.flaticon.com/blog" HOME_URL = "https://www.flaticon.com/blog" API_REST_URL = "https://www.flaticon.com/blog/wp-json/" COOKIE_POLICY = "https://www.freepikcompany.com/cookie" LANGUAGE_STRINGS = {"This web uses cookies to improve your experience. %sMore information%s":"This web uses cookies to improve your experience. %sMore information%s","Your comment was sent succesfully, it is waiting for aproval.":"Your comment was sent succesfully, it is waiting for aproval."} </script> <link rel="alternate" hreflang="en" href="https://www.flaticon.com/blog/applying-text-and-icons-to-backgrounds/" /> <link rel="alternate" hreflang="es" href="https://www.flaticon.com/blog/es/superponer-texto-iconos-en-fondos/" /> <link rel="alternate" hreflang="x-default" href="https://www.flaticon.com/blog/applying-text-and-icons-to-backgrounds/" />  <script data-cfasync="false" data-pagespeed-no-defer> var gtm4wp_datalayer_name = "dataLayer"; var dataLayer = dataLayer || []; </script>   <title>Best practices for applying text and icons to image backgrounds | Flaticon</title> <meta name="description" content="Discover expert techniques for displaying text over background images. Learn how to improve legibility with CSS Grid, color filters, and responsive design."/> <meta name="robots" content="follow, index, max-snippet:-1, max-video-preview:-1, max-image-preview:large"/> <link rel="canonical" href="https://www.flaticon.com/blog/applying-text-and-icons-to-backgrounds/" /> <meta property="og:locale" content="en_US" /> <meta property="og:type" content="article" /> <meta property="og:title" content="Best practices for applying text and icons to image backgrounds | Flaticon" /> <meta property="og:description" content="Discover expert techniques for displaying text over background images. Learn how to improve legibility with CSS Grid, color filters, and responsive design." /> <meta property="og:url" content="https://www.flaticon.com/blog/applying-text-and-icons-to-backgrounds/" /> <meta property="og:site_name" content="Flaticon" /> <meta property="article:publisher" content="https://www.facebook.com/flaticon" /> <meta property="article:author" content="chalo" /> <meta property="article:tag" content="background images" /> <meta property="article:tag" content="Color Filters" /> <meta property="article:tag" content="CSS Grid" /> <meta property="article:tag" content="Display Text over Background Images" /> <meta property="article:tag" content="responsive design" /> <meta property="article:tag" content="Text Legibility" /> <meta property="article:tag" content="typography" /> <meta property="article:section" content="Tips and Trends" /> <meta property="og:updated_time" content="2023-05-26T13:37:53+00:00" /> <meta property="og:image" content="https://mediablog.cdnpk.net/sites/5/2023/05/Cover_TextIcons_Backgrounds.png" /> <meta property="og:image:secure_url" content="https://mediablog.cdnpk.net/sites/5/2023/05/Cover_TextIcons_Backgrounds.png" /> <meta property="og:image:width" content="1280" /> <meta property="og:image:height" content="720" /> <meta property="og:image:alt" content="Best practices for writing text in backgrounds" /> <meta property="og:image:type" content="image/png" /> <meta property="article:published_time" content="2023-05-26T13:17:12+00:00" /> <meta property="article:modified_time" content="2023-05-26T13:37:53+00:00" /> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:title" content="Best practices for applying text and icons to image backgrounds | Flaticon" /> <meta name="twitter:description" content="Discover expert techniques for displaying text over background images. Learn how to improve legibility with CSS Grid, color filters, and responsive design." /> <meta name="twitter:site" content="@flaticon" /> <meta name="twitter:creator" content="@flaticon" /> <meta name="twitter:image" content="https://mediablog.cdnpk.net/sites/5/2023/05/Cover_TextIcons_Backgrounds.png" /> <meta name="twitter:label1" content="Written by" /> <meta name="twitter:data1" content="Max Trewhitt" /> <meta name="twitter:label2" content="Time to read" /> <meta name="twitter:data2" content="11 minutes" /> <script type="application/ld+json" class="rank-math-schema-pro">{"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://www.flaticon.com/blog/#organization","name":"Flaticon","sameAs":["https://www.facebook.com/flaticon","https://twitter.com/flaticon"],"logo":{"@type":"ImageObject","@id":"https://www.flaticon.com/blog/#logo","url":"https://mediablog.cdnpk.net/sites/5/2021/12/flaticonblog-logo.png","contentUrl":"https://mediablog.cdnpk.net/sites/5/2021/12/flaticonblog-logo.png","caption":"Flaticon","inLanguage":"en-US","width":"370","height":"68"}},{"@type":"WebSite","@id":"https://www.flaticon.com/blog/#website","url":"https://www.flaticon.com/blog","name":"Flaticon","publisher":{"@id":"https://www.flaticon.com/blog/#organization"},"inLanguage":"en-US"},{"@type":"ImageObject","@id":"https://mediablog.cdnpk.net/sites/5/2023/05/Cover_TextIcons_Backgrounds.png","url":"https://mediablog.cdnpk.net/sites/5/2023/05/Cover_TextIcons_Backgrounds.png","width":"1280","height":"720","caption":"Best practices for writing text in backgrounds","inLanguage":"en-US"},{"@type":"BreadcrumbList","@id":"https://www.flaticon.com/blog/applying-text-and-icons-to-backgrounds/#breadcrumb","itemListElement":[{"@type":"ListItem","position":"1","item":{"@id":"https://www.flaticon.com/blog","name":"Home"}},{"@type":"ListItem","position":"2","item":{"@id":"https://www.flaticon.com/blog/category/tips-trends/","name":"Tips and Trends"}},{"@type":"ListItem","position":"3","item":{"@id":"https://www.flaticon.com/blog/applying-text-and-icons-to-backgrounds/","name":"Best practices for applying text and icons to image backgrounds"}}]},{"@type":"WebPage","@id":"https://www.flaticon.com/blog/applying-text-and-icons-to-backgrounds/#webpage","url":"https://www.flaticon.com/blog/applying-text-and-icons-to-backgrounds/","name":"Best practices for applying text and icons to image backgrounds | Flaticon","datePublished":"2023-05-26T13:17:12+00:00","dateModified":"2023-05-26T13:37:53+00:00","isPartOf":{"@id":"https://www.flaticon.com/blog/#website"},"primaryImageOfPage":{"@id":"https://mediablog.cdnpk.net/sites/5/2023/05/Cover_TextIcons_Backgrounds.png"},"inLanguage":"en-US","breadcrumb":{"@id":"https://www.flaticon.com/blog/applying-text-and-icons-to-backgrounds/#breadcrumb"}},{"@type":"Person","@id":"https://www.flaticon.com/blog/author/maxt/","name":"Max Trewhitt","url":"https://www.flaticon.com/blog/author/maxt/","image":{"@type":"ImageObject","@id":"https://secure.gravatar.com/avatar/8ed444a315bd505a6fd56cf5a5283493?s=96&d=mm&r=g","url":"https://secure.gravatar.com/avatar/8ed444a315bd505a6fd56cf5a5283493?s=96&d=mm&r=g","caption":"Max Trewhitt","inLanguage":"en-US"},"sameAs":["chalo"],"worksFor":{"@id":"https://www.flaticon.com/blog/#organization"}},{"@type":"BlogPosting","headline":"Best practices for applying text and icons to image backgrounds | Flaticon","keywords":"text","datePublished":"2023-05-26T13:17:12+00:00","dateModified":"2023-05-26T13:37:53+00:00","articleSection":"Tips and Trends","author":{"@id":"https://www.flaticon.com/blog/author/maxt/","name":"Max Trewhitt"},"publisher":{"@id":"https://www.flaticon.com/blog/#organization"},"description":"Discover expert techniques for displaying text over background images. Learn how to improve legibility with CSS Grid, color filters, and responsive design.","name":"Best practices for applying text and icons to image backgrounds | Flaticon","@id":"https://www.flaticon.com/blog/applying-text-and-icons-to-backgrounds/#richSnippet","isPartOf":{"@id":"https://www.flaticon.com/blog/applying-text-and-icons-to-backgrounds/#webpage"},"image":{"@id":"https://mediablog.cdnpk.net/sites/5/2023/05/Cover_TextIcons_Backgrounds.png"},"inLanguage":"en-US","mainEntityOfPage":{"@id":"https://www.flaticon.com/blog/applying-text-and-icons-to-backgrounds/#webpage"}},{"@type":"@SiteNavigationElement","name":"Inspirational","url":"https://www.flaticon.com/blog/category/inspirational/","position":"1","cssSelector":"menu-item-24903"},{"@type":"@SiteNavigationElement","name":"Tips and Trends","url":"https://www.flaticon.com/blog/category/tips-trends/","position":"2","cssSelector":"menu-item-24904"},{"@type":"@SiteNavigationElement","name":"Product updates","url":"https://www.flaticon.com/blog/category/product/","position":"3","cssSelector":"menu-item-28466"},{"@type":"@SiteNavigationElement","name":"Outstanding Resources","url":"https://www.flaticon.com/blog/category/outstanding-resources/","position":"4","cssSelector":"menu-item-25203"}]}</script>  <link rel='stylesheet' id='wp-block-library-css' href='https://www.flaticon.com/blog/wp-includes/css/dist/block-library/style.min.css?ver=6.6.2' type='text/css' media='all' /> <style id='rank-math-toc-block-style-inline-css' type='text/css'> .wp-block-rank-math-toc-block nav ol{counter-reset:item}.wp-block-rank-math-toc-block nav ol li{display:block}.wp-block-rank-math-toc-block nav ol li:before{content:counters(item, ".") ". ";counter-increment:item} </style> <style id='classic-theme-styles-inline-css' type='text/css'> /*! This file is auto-generated */ .wp-block-button__link{color:#fff;background-color:#32373c;border-radius:9999px;box-shadow:none;text-decoration:none;padding:calc(.667em + 2px) calc(1.333em + 2px);font-size:1.125em}.wp-block-file__button{background:#32373c;color:#fff;text-decoration:none} </style> <style id='global-styles-inline-css' type='text/css'> :root{--wp--preset--aspect-ratio--square: 1;--wp--preset--aspect-ratio--4-3: 4/3;--wp--preset--aspect-ratio--3-4: 3/4;--wp--preset--aspect-ratio--3-2: 3/2;--wp--preset--aspect-ratio--2-3: 2/3;--wp--preset--aspect-ratio--16-9: 16/9;--wp--preset--aspect-ratio--9-16: 9/16;--wp--preset--color--black: #000000;--wp--preset--color--cyan-bluish-gray: #abb8c3;--wp--preset--color--white: #ffffff;--wp--preset--color--pale-pink: #f78da7;--wp--preset--color--vivid-red: #cf2e2e;--wp--preset--color--luminous-vivid-orange: #ff6900;--wp--preset--color--luminous-vivid-amber: #fcb900;--wp--preset--color--light-green-cyan: #7bdcb5;--wp--preset--color--vivid-green-cyan: #00d084;--wp--preset--color--pale-cyan-blue: #8ed1fc;--wp--preset--color--vivid-cyan-blue: #0693e3;--wp--preset--color--vivid-purple: #9b51e0;--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%);--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%);--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%);--wp--preset--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%);--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%);--wp--preset--gradient--cool-to-warm-spectrum: linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%);--wp--preset--gradient--blush-light-purple: linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%);--wp--preset--gradient--blush-bordeaux: linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%);--wp--preset--gradient--luminous-dusk: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%);--wp--preset--gradient--pale-ocean: linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%);--wp--preset--gradient--electric-grass: linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%);--wp--preset--gradient--midnight: linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%);--wp--preset--font-size--small: 13px;--wp--preset--font-size--medium: 20px;--wp--preset--font-size--large: 36px;--wp--preset--font-size--x-large: 42px;--wp--preset--spacing--20: 0.44rem;--wp--preset--spacing--30: 0.67rem;--wp--preset--spacing--40: 1rem;--wp--preset--spacing--50: 1.5rem;--wp--preset--spacing--60: 2.25rem;--wp--preset--spacing--70: 3.38rem;--wp--preset--spacing--80: 5.06rem;--wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);--wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);--wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);--wp--preset--shadow--outlined: 6px 6px 0px -3px rgba(255, 255, 255, 1), 6px 6px rgba(0, 0, 0, 1);--wp--preset--shadow--crisp: 6px 6px 0px rgba(0, 0, 0, 1);}:where(.is-layout-flex){gap: 0.5em;}:where(.is-layout-grid){gap: 0.5em;}body .is-layout-flex{display: flex;}.is-layout-flex{flex-wrap: wrap;align-items: center;}.is-layout-flex > :is(*, div){margin: 0;}body .is-layout-grid{display: grid;}.is-layout-grid > :is(*, div){margin: 0;}:where(.wp-block-columns.is-layout-flex){gap: 2em;}:where(.wp-block-columns.is-layout-grid){gap: 2em;}:where(.wp-block-post-template.is-layout-flex){gap: 1.25em;}:where(.wp-block-post-template.is-layout-grid){gap: 1.25em;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-color{color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-color{color: var(--wp--preset--color--white) !important;}.has-pale-pink-color{color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-color{color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-color{color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-color{color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-color{color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-color{color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-color{color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-color{color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-color{color: var(--wp--preset--color--vivid-purple) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-background-color{background-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-pale-pink-background-color{background-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-background-color{background-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-background-color{background-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-background-color{background-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-background-color{background-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-background-color{background-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-background-color{background-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-background-color{background-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-background-color{background-color: var(--wp--preset--color--vivid-purple) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-border-color{border-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-pale-pink-border-color{border-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-border-color{border-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-border-color{border-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-border-color{border-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-border-color{border-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-border-color{border-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-border-color{border-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-border-color{border-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-border-color{border-color: var(--wp--preset--color--vivid-purple) !important;}.has-vivid-cyan-blue-to-vivid-purple-gradient-background{background: var(--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple) !important;}.has-light-green-cyan-to-vivid-green-cyan-gradient-background{background: var(--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan) !important;}.has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange) !important;}.has-luminous-vivid-orange-to-vivid-red-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-orange-to-vivid-red) !important;}.has-very-light-gray-to-cyan-bluish-gray-gradient-background{background: var(--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray) !important;}.has-cool-to-warm-spectrum-gradient-background{background: var(--wp--preset--gradient--cool-to-warm-spectrum) !important;}.has-blush-light-purple-gradient-background{background: var(--wp--preset--gradient--blush-light-purple) !important;}.has-blush-bordeaux-gradient-background{background: var(--wp--preset--gradient--blush-bordeaux) !important;}.has-luminous-dusk-gradient-background{background: var(--wp--preset--gradient--luminous-dusk) !important;}.has-pale-ocean-gradient-background{background: var(--wp--preset--gradient--pale-ocean) !important;}.has-electric-grass-gradient-background{background: var(--wp--preset--gradient--electric-grass) !important;}.has-midnight-gradient-background{background: var(--wp--preset--gradient--midnight) !important;}.has-small-font-size{font-size: var(--wp--preset--font-size--small) !important;}.has-medium-font-size{font-size: var(--wp--preset--font-size--medium) !important;}.has-large-font-size{font-size: var(--wp--preset--font-size--large) !important;}.has-x-large-font-size{font-size: var(--wp--preset--font-size--x-large) !important;} :where(.wp-block-post-template.is-layout-flex){gap: 1.25em;}:where(.wp-block-post-template.is-layout-grid){gap: 1.25em;} :where(.wp-block-columns.is-layout-flex){gap: 2em;}:where(.wp-block-columns.is-layout-grid){gap: 2em;} :root :where(.wp-block-pullquote){font-size: 1.5em;line-height: 1.6;} </style> <link rel='stylesheet' id='wpml-blocks-css' href='https://www.flaticon.com/blog/wp-content/plugins/sitepress-multilingual-cms/dist/css/blocks/styles.css?ver=4.6.10' type='text/css' media='all' /> <link rel='stylesheet' id='freepikcompany-style-css' href='https://www.flaticon.com/blog/wp-content/themes/freepik-blog/dist/css/style.css?ver=c0121896659fb12e9d4a4140f8210389' type='text/css' media='all' /> <link rel='stylesheet' id='fpkab_build_index_front-css' href='https://www.flaticon.com/blog/wp-content/themes/freepik-blog/pack-ab/build/front.css?ver=51a440c822bccb19e1ce' type='text/css' media='all' /> <script type="text/javascript" id="wpml-cookie-js-extra"> /* <![CDATA[ */ var wpml_cookies = {"wp-wpml_current_language":{"value":"en","expires":1,"path":"\/"}}; var wpml_cookies = {"wp-wpml_current_language":{"value":"en","expires":1,"path":"\/"}}; /* ]]> */ </script> <script type="text/javascript" src="https://www.flaticon.com/blog/wp-content/plugins/sitepress-multilingual-cms/res/js/cookies/language-cookie.js?ver=4.6.10" id="wpml-cookie-js" defer="defer" data-wp-strategy="defer"></script> <script type="text/javascript" src="https://www.flaticon.com/blog/wp-content/themes/freepik-blog/dist/js/global-script.js?ver=c79d65c880a4b010bdbf59a702df68b3" id="freepikcompany-global-js"></script> <script type="text/javascript" src="https://www.flaticon.com/blog/wp-includes/js/jquery/jquery.min.js?ver=3.7.1" id="jquery-core-js"></script> <script type="text/javascript" src="https://www.flaticon.com/blog/wp-includes/js/jquery/jquery-migrate.min.js?ver=3.4.1" id="jquery-migrate-js"></script> <script type="text/javascript" src="https://www.flaticon.com/blog/wp-content/themes/freepik-blog/pack-ab/vendor/oboyda/wp-seed-e/src/js/jquery-view.js?ver=1.0.0" id="_jquery_view-js"></script> <script type="text/javascript" id="fpkab_build_index_front-js-extra"> /* <![CDATA[ */ var fpkabIndexVars = {"ajaxurl":"https:\/\/wordpress-pro-3928501.cdnpk.net\/flaticon\/wp-admin\/admin-ajax.php","dataLayer":{"event":"ga4event","event_name":"page_view","page_location":"https:\/\/wordpress-pro-3928501.cdnpk.net\/flaticon\/applying-text-and-icons-to-backgrounds\/","page_code":200,"page_lang":"en","country":"","content_group":"blog","content_group2":"na","content_type":"post","author_name":"Max Trewhitt","user_id":"","user_type":"","page_path_es":"https:\/\/wordpress-pro-3928501.cdnpk.net\/flaticon\/es\/superponer-texto-iconos-en-fondos\/"}}; /* ]]> */ </script> <script type="text/javascript" src="https://www.flaticon.com/blog/wp-content/themes/freepik-blog/pack-ab/build/front.js?ver=51a440c822bccb19e1ce" id="fpkab_build_index_front-js"></script> <meta name="generator" content="WPML ver:4.6.10 stt:1,2;" />   <script data-cfasync="false" data-pagespeed-no-defer type="text/javascript"> var dataLayer_content = {"pagePostType":"post","pagePostType2":"single-post","pageCategory":["tips-trends"],"pageAttributes":["background-images","color-filters","css-grid","display-text-over-background-images","responsive-design","text-legibility","typography"],"pagePostAuthor":"Max Trewhitt","geoCountryCode":"(no geo data available)","geoCountryName":"(no geo data available)","geoRegionCode":"(no geo data available)","geoRegionName":"(no geo data available)","geoCity":"(no geo data available)","geoZipcode":"(no geo data available)","geoLatitude":"(no geo data available)","geoLongitude":"(no geo data available)","geoFullGeoData":{"success":false,"error":{"code":101,"type":"missing_access_key","info":"You have not supplied an API Access Key. [Required format: access_key=YOUR_ACCESS_KEY]"}}}; dataLayer.push( dataLayer_content ); </script> <script data-cfasync="false"> (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= '//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-PRQMDLG'); </script> <script type="text/javascript" src="//wordpress-pro-3928501.cdnpk.net/flaticon/?wordfence_syncAttackData=1732397215.8193" async></script> <script type="text/javascript"> if(typeof wpseedeVars === "undefined"){ var wpseedeVars = {"ajaxurl":"https:\/\/wordpress-pro-3928501.cdnpk.net\/flaticon\/wp-admin\/admin-ajax.php"}; } </script>  <script type='text/javascript'> window._tfa = window._tfa || []; window._tfa.push({notify: 'event', name: 'page_view', id: 1198096}); !function (t, f, a, x) { if (!document.getElementById(x)) { t.async = 1;t.src = a;t.id=x;f.parentNode.insertBefore(t, f); } }(document.createElement('script'), document.getElementsByTagName('script')[0], '//cdn.taboola.com/libtrc/unip/1198096/tfa.js', 'tb_tfa_script'); </script>   <script> document.addEventListener('DOMContentLoaded', function() { if ('function' === typeof window.gtm) { window.gtm(); } }); </script>  <style type="text/css"> :root { --client-clr: #009D73; --client-clr--hover: #008B71; --client-btn: #00AF80; --client-btn--hover: #009D73; } </style> <script>!function(e){var n="https://s.go-mpulse.net/boomerang/";if("False"=="True")e.BOOMR_config=e.BOOMR_config||{},e.BOOMR_config.PageParams=e.BOOMR_config.PageParams||{},e.BOOMR_config.PageParams.pci=!0,n="https://s2.go-mpulse.net/boomerang/";if(window.BOOMR_API_key="R5JS7-M8GWC-DW7YC-BENQZ-YEA7H",function(){function e(){if(!o){var e=document.createElement("script");e.id="boomr-scr-as",e.src=window.BOOMR.url,e.async=!0,i.parentNode.appendChild(e),o=!0}}function t(e){o=!0;var n,t,a,r,d=document,O=window;if(window.BOOMR.snippetMethod=e?"if":"i",t=function(e,n){var t=d.createElement("script");t.id=n||"boomr-if-as",t.src=window.BOOMR.url,BOOMR_lstart=(new Date).getTime(),e=e||d.body,e.appendChild(t)},!window.addEventListener&&window.attachEvent&&navigator.userAgent.match(/MSIE [67]\./))return window.BOOMR.snippetMethod="s",void t(i.parentNode,"boomr-async");a=document.createElement("IFRAME"),a.src="about:blank",a.title="",a.role="presentation",a.loading="eager",r=(a.frameElement||a).style,r.width=0,r.height=0,r.border=0,r.display="none",i.parentNode.appendChild(a);try{O=a.contentWindow,d=O.document.open()}catch(_){n=document.domain,a.src="javascript:var d=document.open();d.domain='"+n+"';void(0);",O=a.contentWindow,d=O.document.open()}if(n)d._boomrl=function(){this.domain=n,t()},d.write("<bo"+"dy onload='document._boomrl();'>");else if(O._boomrl=function(){t()},O.addEventListener)O.addEventListener("load",O._boomrl,!1);else if(O.attachEvent)O.attachEvent("onload",O._boomrl);d.close()}function a(e){window.BOOMR_onload=e&&e.timeStamp||(new Date).getTime()}if(!window.BOOMR||!window.BOOMR.version&&!window.BOOMR.snippetExecuted){window.BOOMR=window.BOOMR||{},window.BOOMR.snippetStart=(new Date).getTime(),window.BOOMR.snippetExecuted=!0,window.BOOMR.snippetVersion=12,window.BOOMR.url=n+"R5JS7-M8GWC-DW7YC-BENQZ-YEA7H";var i=document.currentScript||document.getElementsByTagName("script")[0],o=!1,r=document.createElement("link");if(r.relList&&"function"==typeof r.relList.supports&&r.relList.supports("preload")&&"as"in r)window.BOOMR.snippetMethod="p",r.href=window.BOOMR.url,r.rel="preload",r.as="script",r.addEventListener("load",e),r.addEventListener("error",function(){t(!0)}),setTimeout(function(){if(!o)t(!0)},3e3),BOOMR_lstart=(new Date).getTime(),i.parentNode.appendChild(r);else t(!1);if(window.addEventListener)window.addEventListener("load",a,!1);else if(window.attachEvent)window.attachEvent("onload",a)}}(),"".length>0)if(e&&"performance"in e&&e.performance&&"function"==typeof e.performance.setResourceTimingBufferSize)e.performance.setResourceTimingBufferSize();!function(){if(BOOMR=e.BOOMR||{},BOOMR.plugins=BOOMR.plugins||{},!BOOMR.plugins.AK){var n=""=="true"?1:0,t="",a="bdpnbevydn5wez2cjcpq-f-6f4aff794-clientnsv4-s.akamaihd.net",i="false"=="true"?2:1,o={"ak.v":"39","ak.cp":"1587957","ak.ai":parseInt("1019318",10),"ak.ol":"0","ak.cr":0,"ak.ipv":4,"ak.proto":"http/1.1","ak.rid":"1bfdc327","ak.r":41571,"ak.a2":n,"ak.m":"b","ak.n":"ff","ak.bpcip":"8.222.208.0","ak.cport":37988,"ak.gh":"184.27.123.94","ak.quicv":"","ak.tlsv":"tls1.2","ak.0rtt":"","ak.0rtt.ed":"","ak.csrc":"-","ak.acc":"reno","ak.t":"1732397215","ak.ak":"hOBiQwZUYzCg5VSAfCLimQ==i6JgcrPA7SNXsd2XMHsEOI5nU2dkl1qzhqoLc/JRc1C027KLQHw2mcVNj4Ez2u9o2QUVdA6yfmPMDN3lEZhTyuIFBkc0UT4Bn1pLVLEmZBamnFw1LI4dkt4OwSmNmJ33QIVKsHIhi19jXk8d+SFC3b1U4TydUFZPeKt65vmZXwpScCXF4broTKsk2bpaLtcLtzaamu6lPxesywuvBIc7PH5Alfdp67P8GAGvmjQOGnDq3Y3PIf5BKmf763E2rS41odKg7lI38ou56tp5PhH093M8S6Bnc4o1UX77iJDcrhMI7bnfUA3BMhca0oPhaS7QD5a9xbkE1QCon8yxExJCGcgCJJTIViObKXeKgJyMzPKKo6zFogKnStNm8uAn2Izzp0EViaQpV/qKGLdE2CAoaTFx8K6WPRoOFC9F4R9o5cM=","ak.pv":"25","ak.dpoabenc":"","ak.tf":i};if(""!==t)o["ak.ruds"]=t;var r={i:!1,av:function(n){var t="http.initiator";if(n&&(!n[t]||"spa_hard"===n[t]))o["ak.feo"]=void 0!==e.aFeoApplied?1:0,BOOMR.addVar(o)},rv:function(){var e=["ak.bpcip","ak.cport","ak.cr","ak.csrc","ak.gh","ak.ipv","ak.m","ak.n","ak.ol","ak.proto","ak.quicv","ak.tlsv","ak.0rtt","ak.0rtt.ed","ak.r","ak.acc","ak.t","ak.tf"];BOOMR.removeVar(e)}};BOOMR.plugins.AK={akVars:o,akDNSPreFetchDomain:a,init:function(){if(!r.i){var e=BOOMR.subscribe;e("before_beacon",r.av,null,null),e("onbeacon",r.rv,null,null),r.i=!0}return this},is_complete:function(){return!0}}}}()}(window);</script></head> <body class="flaticon post-template-default single single-post postid-28684 single-format-standard" data-cat-parent="tips-trends"> <header id="header" > <div class="preheader"> <div class="row mg-none pd-none full-height preheader-content"> <span class="hdr-logo mg-none" role="banner"> <a class="hdr-logo-link logo" href="https://www.flaticon.com/blog/" rel="home"> <img src="https://mediablog.cdnpk.net/sites/5/2023/12/flaticon-blog-nuevo.svg" alt="Flaticon"> </a> </span> <div class="show-menu"> <div class="header--inner"> <button class="button button--md button--icon button--icon--only button--state trigger__button" data-trigger="search"> <i class="icon icon--xl icon--mg-md icon--search state--inactive" aria-hidden="true"></i> <i class="icon icon--xl icon--mg-md icon--search state--active" aria-hidden="true"></i> </button> <button class="button button--md button--icon button--icon--only trigger__button button--state" data-trigger="nav-main"> <i class="icon icon--xl icon--mg-md icon--menuburger state--inactive"></i> <i class="icon icon--xl icon--mg-md icon--cross state--active"></i> </button> </div> </div> <div class="hide-menu"> <h6 class="hdr-go-to"> <a href="https://www.flaticon.com/" target="_blank" title="go to flaticon">go to flaticon <i class="icon icon--md icon--external-link"></i> </a> </h6> </div> </div> </div> <div class="header--inner"> <div class="header--inner-content"> <nav id="nav-main" class="nav nav-main hide-menu" role="navigation"> <ul> <li class=" menu-item menu-item-type-taxonomy menu-item-object-category menu-item-24903 inline-block"> <a target="" href="https://www.flaticon.com/blog/category/inspirational/">Inspirational</a> </li> <li class=" menu-item menu-item-type-taxonomy menu-item-object-category current-post-ancestor current-menu-parent current-post-parent menu-item-24904 inline-block"> <a target="" href="https://www.flaticon.com/blog/category/tips-trends/">Tips and Trends</a> </li> <li class=" menu-item menu-item-type-taxonomy menu-item-object-category menu-item-28466 inline-block"> <a target="" href="https://www.flaticon.com/blog/category/product/">Product updates</a> </li> <li class=" menu-item menu-item-type-taxonomy menu-item-object-category menu-item-25203 inline-block"> <a target="" href="https://www.flaticon.com/blog/category/outstanding-resources/">Outstanding Resources</a> </li> <li class="inline-block v-alignc search-buton--holder hide-menu"> <button class="button button--inverted button--sm button--sm pd-none trigger__button" data-trigger="search"> <i class="icon icon--md icon--mg-sm icon--search" aria-hidden="true"></i> </button> </li> </ul> <h6 class="hdr-go-to"> <a href="https://www.flaticon.com/" target="_blank" title="go to flaticon">go to flaticon <i class="icon icon--md icon--external-link"></i> </a> </h6> </nav> </div> </div> <div id="search" class="trigger search--holder"> <div class="content-wrapper"> <form role="search" method="get" id="searchform" action="https://www.flaticon.com/blog"> <div class="searchform-content"> <input type="search" id="s" name="s" class="mg-none" placeholder="Search..."> <button class="button button--icon button--inverted button--xl button--icon--only trigger__close" type="button"> <i class="icon icon--md icon--mg-xl icon--cross"></i> </button> </div> </form> </div> </div> </header> <script> if (typeof gr !== 'undefined' && gr.updateUI) { gr.updateUI(); } </script> <main id="main"> <div id="content" role="main" class="content-wrapper"> <div class="wrapper "> <div id="share" class="share" data-share-url="https://www.flaticon.com/blog/applying-text-and-icons-to-backgrounds/" data-share-title="Best practices for applying text and icons to image backgrounds" data-share-tags="background images,Color Filters,CSS Grid,Display Text over Background Images,responsive design,Text Legibility,typography" data-share-image="https://mediablog.cdnpk.net/sites/5/2023/05/Cover_TextIcons_Backgrounds.png" data-share-summary=""> <div class="share--icons"> <ul> <li> <button class="button button--flat button--inverted button--lg pd-none" data-network="facebook"> <i class="icon icon--sm icon--mg-lg icon--facebook"></i> </button> </li> <li> <button class="button button--flat button--inverted button--lg pd-none" data-network="twitter"> <i class="icon icon--sm icon--mg-lg icon--twitter"></i> </button> </li> <li> <button class="button button--flat button--inverted button--lg pd-none" data-network="linkedin"> <i class="icon icon--sm icon--mg-lg icon--linkedin"></i> </button> </li> <li> <button class="button button--flat button--inverted button--lg pd-none" data-network="whatsapp"> <i class="icon icon--sm icon--mg-lg icon--whatsapp"></i> </button> </li> <li> <button class="button button--flat button--inverted button--lg pd-none" data-network="telegram"> <i class="icon icon--sm icon--mg-lg icon--telegram"></i> </button> </li> </ul> </div> </div> <script> var FP_BANNER_TAGS = ''; </script> <div class="row mg-none post--single"> <article class="post-type-post post--single--content col pd-none mg-none" id="post-28684"> <figure class="article-media"> <img src="https://mediablog.cdnpk.net/sites/5/2023/05/Cover_TextIcons_Backgrounds.png" width="1280" height="720" loading="lazy"> </figure> <section class="article-content"> <h1 class="article-h1">Best practices for applying text and icons to image backgrounds</h1> <div class="article-info"> <p class="blog-author mg-none"> <span class="avatar avatar--circle"> <img src='https://secure.gravatar.com/avatar/8ed444a315bd505a6fd56cf5a5283493?s=96&d=mm&r=g' alt='Max Trewhitt'> </span> <span>By </span><a href="https://www.flaticon.com/blog/author/maxt/"> Max Trewhitt </a> </p> <div class="article-metas"> <time datetime="2023-05-26T13:17:12+00:00">May 26, 2023</time> </div> </div> <div class="article-body"> <p>Graphic design is about telling visually compelling stories, whether it’s selling a product, a lifestyle, or an idea, and the more intensity and detail we infuse into our designs, the more functional and appealing they become, right? <b>The idea of overlaying text to images is a brilliant way to catch people’s attention, and we see more of it now than ever</b> in online stores, portfolios, banners, and social media feeds. We all love photography, so marrying strong visuals with the power of words just seems like a done deal. However, as we are about to find out, it can have some serious consequences from a functional communicative point of view. In this eye-opening article, we are going to make sure that none of us have to ever suffer from poorly designed text-to-image overlaying ever again.</p> <p>First of all, it’s important to <b>address the necessity of clear communication in your designs.</b> And in the case of using text over imagery, it is often the case that the design is trying to convey a message supported by strong visuals. As such, it is vital to understand that the image is the supporting element of your message and should be respected as such. Want to find out more about usability in UX design? Check out this article focusing on <a href="https://www.flaticon.com/blog/usability-ux-ui-2023-prediction/" target="_blank" rel="noopener">usability trends 2023</a>.</p> <p>The words and the message are what’s more important from a commercial point of view, so <b>providing clear and effective typography is something that you, as a designer, should consider above all else</b>. The problem designers face when working with imagery is contrast. If you have black text over a dark image, the text will essentially become unreadable. This is what we want to avoid at all costs when creating perfectly readable designs. Think of people who have bad eyesight or those reading from a long distance. This could make up a percentage of your target audience that you are no longer communicating with.</p> <h2>Making the right choices from the get-go</h2> <p>Creating any design is a journey, and when it comes to preparing your composition, you should treat preparation like you would a long walk with the dog. Deciding which shoes you wear is likely determined by the outside elements, and this is no different when it comes to choosing the image and font you use in your design.</p> <h3>Artboard and content, setting up your design</h3> <p><img fetchpriority="high" decoding="async" class="aligncenter wp-image-28686" src="https://mediablog.cdnpk.net/sites/5/2023/05/bottom-corners.jpg" alt="H1 text would be more comfortable sitting on the throne at the top of your artboard for clear hierarchy." width="1024" height="576" /></p> <p>For the whole design to resonate and function at its optimal proficiency, it’s good practice to<b> place all the functional elements out in front of you as if you were crafting something physically</b>. In the case of simple text and icon overlays, the content, or copy in this case, would be placed onto your artboard. Perhaps H1 text would be more comfortable sitting on the throne at the top of your artboard for clear hierarchy, whereas body text or descriptions, with the support of icons, would retreat towards one of the bottom corners letting the image do a lot of the talking.</p> <h3>Imagery</h3> <p>There are a few ways to source photos thanks to stock images, AI image generation, and even going out and taking a few snaps yourself. But before you go ahead and pick one. It’s imperative to<b> have a vision of the overall design in your head</b>, and thanks to your artboard preparation, you can now <b>look for an image that will complement the content instead of designing around the image, which can be problematic</b>. And if you’re really clever about it, you could find one with the perfect amount of negative space, exactly where other elements need to be placed.</p> <p>However, it’s not always the choice of the designer which image to use in your designs, and there are many different ways of getting around this obstacle, using various editing techniques, which we will cover later in the article.</p> <h3>Font choice</h3> <p>With a visually striking image now selected and in place, you can now balance out your design with a font that resonates perfectly with the image, the intended message, and the overall aesthetic of your composition. Generally speaking, <b>going for a bold font is a good starting point, as this will have fewer problems competing with a busy background image</b>. On the other hand, if your image is simple, monochrome, or uncluttered, more options will open up to you with the scope for using lighter, more decorative font styles that will convey a more subtle tone to your design. Read this fascinating article on <a href="https://www.flaticon.com/blog/fonts-for-ui-design/" target="_blank" rel="noopener">best fonts for UI design</a> to learn more.</p> <h2>Balancing the contrast</h2> <p><img decoding="async" class="aligncenter wp-image-28690" src="https://mediablog.cdnpk.net/sites/5/2023/05/Interior_TextIcons_Backgrounds_2.jpg" alt="To create a striking contrast between image and text, you need to understand the method of using contrast." width="1024" height="576" /></p> <p>To create a striking contrast between image and text, you need to understand the method of using contrast. The basics are easily understood, thinking in plain black and white. <b>Black text over a white background, or in reverse, will provide your composition with optimal contrast</b>. This is what we aim for when overlaying text with images. Getting the contrast balance right is a case of trial and error, and testing out different colors, gradients, and opacity levels will eventually lead to your design not only looking great but also functioning at its best.</p> <h2>Icons over images</h2> <p><img decoding="async" class="aligncenter wp-image-28692" src="https://mediablog.cdnpk.net/sites/5/2023/05/Interior_TextIcons_Backgrounds_3.jpg" alt="nd since icons and typography share many similarities aesthetically, they both like the same treatment." width="1024" height="318" /></p> <p>When creating text over images, it’s often the case that icons come to join the party. And <b>since icons and typography share many similarities aesthetically, they both like the same treatment</b>. Overlaying icons, no matter how complex they may be, follows the same principles when it comes to using effects and contrast. You don’t want your important icons getting lost in the design. In fact, using the same methods you use for text, or vice versa, can often lead to a coherent design that shows professionalism and uniformity. Such icons are regularly used to represent a way of getting in touch via <a href="https://www.flaticon.com/free-icons/social-media" target="_blank" rel="noopener">social media</a>, <a href="https://www.flaticon.com/free-icons/email" target="_blank" rel="noopener">email</a>, or <a href="https://www.flaticon.com/free-icons/phone" target="_blank" rel="noopener">phone</a>. Additionally, <b>they are frequently used to communicate a </b><a href="https://www.flaticon.com/free-icons/call-to-action" target="_blank" rel="noopener"><b>call to action</b></a><b>,</b> often in the case of interfaces, digital content and online banner designs, clearly defined from the image. Using a variety of overlaying techniques, you will find different ways to make your icons stand out against an impressive image.</p> <p><img loading="lazy" decoding="async" class="aligncenter wp-image-28694" src="https://mediablog.cdnpk.net/sites/5/2023/05/Interior_TextIcons_Backgrounds_4.jpg" alt="you will find different ways to make your icons stand out against an impressive image. " width="1024" height="318" /></p> <h2>10 different ways of creating striking text overlays</h2> <p>It is understandable that when working with images, there are so many avenues to go down, and simply overlaying text over a carefully picked photo might seem a little boring or predictable, especially when your competitors are all doing the same thing<b>.</b> Now it’s time to <b>take a look at various techniques that can set you apart from the rest</b> and perhaps even solve some of the issues that are often faced when applying text to images.</p> <h3>Overlaying text on background images with CSS Grid</h3> <p><img loading="lazy" decoding="async" class="aligncenter wp-image-28696" src="https://mediablog.cdnpk.net/sites/5/2023/05/Interior_TextIcons_Backgrounds_5.jpg" alt=" One of the most powerful uses of CSS Grid is overlaying text on background images." width="1024" height="576" /></p> <p>CSS Grid has revolutionized web design, allowing for a level of control and creativity that was previously impossible. <b>One of the most powerful uses of CSS Grid is overlaying text on background images</b>. This technique can elevate any website, whether it’s a portfolio, e-commerce platform, or personal blog. By using grid lines and areas, you can strategically place headings, subheadings, and even calls to action on top of background images, creating a stunning effect that draws the user in. With a keen eye for design and some knowledge of CSS, anyone can add this feature to their website and take their online presence to the next level.</p> <h3>Using the parallax effect to overlay text</h3> <p><img loading="lazy" decoding="async" class="aligncenter size-full" src="https://mediablog.cdnpk.net/sites/5/2023/05/Parallax.gif" alt="Parallax effect to overlay text." width="1920" height="1080" /></p> <p>When thinking of a solution for text overlay in web design, one method can really stand out and impress visitors to your website. <a href="https://www.flaticon.com/blog/parallax-effect/" target="_blank" rel="noopener"><b>The parallax effect</b></a><b> is when multiple layers move over one another while scrolling through a website, and the results are stunning</b>. You can have an image moving at one speed, and the text layered on top moving at a different speed or even going in a different direction. Any problems with contrast are often resolved as the text travels through varied areas of the image and can even have some very impressive artistic effects. Furthermore, it shows the reader that things have moved on from static, boring websites that we are all too familiar with.</p> <h3>Text drop shadows</h3> <p>Applying a drop shadow or lighting effect to your text is a classic way of solving readability issues over imagery or video footage. <b>Designers admire its effectiveness because of its subtleness, often not even being noticed</b>. The technique is ever present in subtitles on TV due to the constantly changing backgrounds and gives viewers the chance to follow the narrative with no volume. However, going too far with this technique can make your efforts look cheap and shabby, so getting the balance right will give your design the benefit of the doubt.</p> <h3>Text boxes</h3> <p><img loading="lazy" decoding="async" class="aligncenter wp-image-28698" src="https://mediablog.cdnpk.net/sites/5/2023/05/Interior_TextIcons_Backgrounds_7.jpg" alt="With total control of the opacity, color, and border of the text box, you can make them as subtle or as loud as you like, from headers to subheaders, all the way to body text." width="1024" height="576" /></p> <p>Another very common technique that designers love. This method works on virtually any image since you are essentially carrying the text on a tray. And <b>with total control of the opacity, color, and border of the text box, you can make them as subtle or as loud as you like, from headers to subheaders, all the way to body text</b>. A popular design style that has stood the test of time, you could almost say they are a classic, and their functionality has been adapted by some of the most memorable designs right across the board thanks to their punchy ability to give us high contrast in any situation.</p> <h3>Applying color filters to background images</h3> <p><img loading="lazy" decoding="async" class="aligncenter wp-image-28700" src="https://mediablog.cdnpk.net/sites/5/2023/05/Interior_TextIcons_Backgrounds_8.jpg" alt="" width="1024" height="576" /></p> <p>One way to adapt your image for overlaying type is by adding color filters. Flooding your image with color adds vibrancy and an appealing atmosphere, and since it almost turns your image into a monochrome, it means laying text over the top is much more visible. Furthermore, <b>because the choice of color is totally up to you, you can create striking brand designs that resonate with your business identity</b>. Color filters are easily accessible using Lightroom’s huge selection, or if you want more control, why not head into Photoshop and create your own?</p> <h3>Lowering image opacity</h3> <p>Toning down is a highly effective way to use images in any scenario, leading to a well-balanced out design, especially when other elements are involved. <b>It takes away the sting of overpowered images, making way for the rest of the design to pull through in a visually striking way</b>, and when text is involved, it only means it’s more readable. You can play around with opacity gradients too, whereby the image fades gradually toward other elements that are in your composition. Great for certain situations where you want the image to be more prominent.</p> <h3>Texturizing images</h3> <p><b>Adding texture to an image can have a similar effect to color filters as it unites the image and creates a more functional canvas for your text overlays</b>. Adjusting the textures’ opacity over the image is where the tweaking comes in, and it will be down to your judgment as to how much texture is needed without it becoming a problem for readability.</p> <h3>Adding blur to images</h3> <p>Here is a clever way to accent or tone down areas of your image using the blurring effect in Photoshop.<b> Blurring certain areas of the image can accentuate elements such as text so they become more prominent</b>, almost elevating them off the page to jump out at the audience. With a little experience, you can also make the image seem 3D with a tilt-shift effect, whereby you can make areas of the photo look out of focus. Accompanied by some striking typography, this marriage of effect and layered-over elements can look very appealing and is commonly observed when promoting a small but valuable product.</p> <h3>Thinking out the box and offsetting type</h3> <p><img loading="lazy" decoding="async" class="aligncenter wp-image-28702" src="https://mediablog.cdnpk.net/sites/5/2023/05/Interior_TextIcons_Backgrounds_9.jpg" alt="Thinking out the box and offsetting type." width="1024" height="576" /></p> <p>Who said your text has to be layered directly over your image? If you’re feeling a little playful and adventurous, try playing with the image, cropping it into tighter spaces, and moving the image around the artboard. You can then accompany the image with offset elements, including type or body text. <b>This will give your design a very contemporary feel, yet it will provide you with various options when it comes to adapting texts</b>. This method is great for websites, apps, and presentations that often have a mixture of media.</p> <h3>Manipulating the image in Photoshop</h3> <p>Sometimes, when a specific image is needed for your text overlay design, we resort to using image manipulation in Photoshop to adapt the image for the design. <b>Perhaps the image is too cluttered where important text or information needs to be</b>, and so there are tools in Photoshop that allow us to clean up the image ready for layering other elements.</p> <ul> <li><b>Healing brush tool</b> – This impressive tool repairs imperfection by painting with pixels from other parts of the image.</li> <li><b>Patch tool</b> – You can replace a selected area of the image with pixels from elsewhere in the photo.</li> <li><b>Clone stamp tool</b> – This tool means you can paint with pixels from elsewhere in the image. Great for getting rid of unwanted elements in the photo.</li> </ul> <p>Displaying text over background images can be a challenging task. However, with the right techniques and best practices in mind, you can create a visually striking design. Keep in mind the importance of contrast, selecting the right font, and testing the design on different devices. By following these tips, you can create a design that is visually appealing and easy to read.</p> </div> <div class="article-footer"> <div class="blog-author"> <span class="avatar avatar--circle"> <img src='https://secure.gravatar.com/avatar/8ed444a315bd505a6fd56cf5a5283493?s=96&d=mm&r=g' alt='Max Trewhitt'> </span> <span>By </span><a href="https://www.flaticon.com/blog/author/maxt/"> Max Trewhitt </a> </div> </div> </section> <section class="related"> <p class="h3">Related posts</p> <div class="row row--post"> <article class="post col post-related post--inspirational post--post" id="post-28965"> <div class="post--inner"> <div class="row mg-none-i full-height"> <a href="https://www.flaticon.com/blog/icons-in-infographics/" class="post--img col mg-none pd-none full-width"> <figure> <img src="https://mediablog.cdnpk.net/sites/5/2023/09/Cover.png" alt="The purpose of icons in infographics" width="300" height="169" loading="lazy"> </figure> </a> <div class="post--content mg-none full-width"> <div> <a href="https://www.flaticon.com/blog/category/inspirational/" class="uppercase link--category">Inspirational</a> <p class="h2"><a href="https://www.flaticon.com/blog/icons-in-infographics/">The purpose of icons in infographics</a></p> </div> <p class="post-author overflow-ellipsis">By <a href="https://www.flaticon.com/blog/author/maxt/" class="semibold">Max Trewhitt</a> <time datetime="2023-09-20T15:33:38+00:00">September 20, 2023</time></p> </div> </div> </div> </article> <article class="post col post-related post--tips and trends post--post" id="post-28920"> <div class="post--inner"> <div class="row mg-none-i full-height"> <a href="https://www.flaticon.com/blog/clip-art/" class="post--img col mg-none pd-none full-width"> <figure> <img src="https://mediablog.cdnpk.net/sites/5/2023/07/COVERBLOG.png" alt="Clip Art: An introduction to a timeless design resource" width="300" height="169" loading="lazy"> </figure> </a> <div class="post--content mg-none full-width"> <div> <a href="https://www.flaticon.com/blog/category/tips-trends/" class="uppercase link--category">Tips and Trends</a> <p class="h2"><a href="https://www.flaticon.com/blog/clip-art/">Clip Art: An introduction to a timeless design resource</a></p> </div> <p class="post-author overflow-ellipsis">By <a href="https://www.flaticon.com/blog/author/maxt/" class="semibold">Max Trewhitt</a> <time datetime="2023-07-31T06:49:28+00:00">July 31, 2023</time></p> </div> </div> </div> </article> </div> </section> </article> </div> </div> </div> </main> <footer id="footer"> <div class="footer__top"> <div class="content-wrapper"> <div class="row"> <div class="col__xs--12 col__sm--6 col__md--4 footer__menu"> <h6>Do you have any question?</h6> <p>Contact us and we will be happy to assist you</p> <a href="https://support.freepik.com/hc/en-us" class="button button--md"> Contact Support </a> </div> <div class="col__xs--12 col__sm--3 col__md--4 footer__menu"> <h6>Help</h6> <ul> <li class=" menu-item menu-item-type-taxonomy menu-item-object-category menu-item-25059"> <a target="" href="https://www.flaticon.com/blog/category/inspirational/">Inspirational</a> </li> <li class=" menu-item menu-item-type-taxonomy menu-item-object-category current-post-ancestor current-menu-parent current-post-parent menu-item-25061"> <a target="" href="https://www.flaticon.com/blog/category/tips-trends/">Tips and Trends</a> </li> <li class=" menu-item menu-item-type-taxonomy menu-item-object-category menu-item-25058"> <a target="" href="https://www.flaticon.com/blog/category/freebies/">Freebies</a> </li> <li class=" menu-item menu-item-type-taxonomy menu-item-object-category menu-item-25060"> <a target="" href="https://www.flaticon.com/blog/category/outstanding-resources/">Outstanding Resources</a> </li> <li class=" menu-item menu-item-type-taxonomy menu-item-object-category menu-item-25062"> <a target="" href="https://www.flaticon.com/blog/category/whats-cooking/">What's cooking</a> </li> </ul> <ul> <li style="margin-top: 5px;">  <button id="ot-sdk-btn" class="ot-sdk-show-settings">Cookie Settings</button>  </li> <ul> </div> <div class="col__xs--12 col__sm--3 col__md--4 footer__menu"> <h6>Social media</h6> <ul class="footer__social"> <li class="pd-lv1 pd-y-none"> <a href="https://www.facebook.com/flaticon" target="_blank" class="button button--sm button--flat button--icon button--icon--only button--facebook"> <i class="icon icon--sm icon--mg-sm icon--facebook"></i> </a> </li> <li class="pd-lv1 pd-y-none"> <a href="https://twitter.com/flaticon" target="_blank" class="button button--sm button--flat button--icon button--icon--only button--twitter"> <i class="icon icon--sm icon--mg-sm icon--twitter"></i> </a> </li> <li class="pd-lv1 pd-y-none"> <a href="https://www.pinterest.com/flaticon" target="_blank" class="button button--sm button--flat button--icon button--icon--only button--pinterest"> <i class="icon icon--sm icon--mg-sm icon--pinterest"></i> </a> </li> <li class="pd-lv1 pd-y-none"> <a href="https://www.instagram.com/flaticon/?hl=en" target="_blank" class="button button--sm button--flat button--icon button--icon--only button--instagram"> <i class="icon icon--sm icon--mg-sm icon--instagram"></i> </a> </li> <li class="pd-lv1 pd-y-none"> <a href="https://www.youtube.com/channel/UC9wPXN2TIWoUamqONb7v8Pw" target="_blank" class="button button--sm button--flat button--icon button--icon--only button--youtube"> <i class="icon icon--sm icon--mg-sm icon--youtube"></i> </a> </li> </ul> </div> </div> </div> </div> <div class="footer__bottom"> <div class="content-wrapper"> <div class="row"> <div class="col mg-none"> <div class="row row--vertical-center mg-none-i"> <a class="logo link--text inline-block clearfix" href="https://www.freepikcompany.com/"> <img src="https://www.flaticon.com/blog/wp-content/themes/freepik-blog/media/img/logo/freepik-company.svg" width="191" class="block"> </a> <p class="mg-none"> ©  2010-2024 Freepik Company S.L. All rights reserved.</p> </div> </div> <div class="col width-auto mg-none"> <div class="dropdown dropdown--top-right dropdown--inverted"> <select id="language" name="language" data-search="true"> <option value="https://www.flaticon.com/blog/applying-text-and-icons-to-backgrounds/" selected>English</option> <option value="https://www.flaticon.com/blog/es/superponer-texto-iconos-en-fondos/" >Español</option> </select> </div> </div> </div> </div> </div><div class="footer__projects"> <div class="content-wrapper"> <div class="row"> <div class="col mg-none content"> <p>Freepik Company projects</p> <ul> <li class="inline-block"><a href="//www.freepik.com" class="link-inverted" target="_blank">Freepik</a></li> <li class="inline-block"><a href="//www.flaticon.com" class="link-inverted" target="_blank">Flaticon</a></li> <li class="inline-block"><a href="//www.slidesgo.com" class="link-inverted" target="_blank">Slidesgo</a></li> <li class="inline-block"><a href="//www.wepik.com" class="link-inverted" target="_blank">Wepik</a></li> <li class="inline-block"><a href="//www.videvo.net" class="link-inverted" target="_blank">Videvo</a></li> </ul> </div> </div> </div> </div> </footer>   <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-PRQMDLG" height="0" width="0" style="display:none;visibility:hidden" aria-hidden="true"></iframe></noscript> <script type="text/javascript" src="https://www.flaticon.com/blog/wp-content/themes/freepik-blog/dist/js/script.js?ver=1d704dda9d2cbaedf93416f24c776720" id="freepikcompany-script-js"></script> </body> </html>