{"id":1409,"date":"2016-08-15T10:29:14","date_gmt":"2016-08-15T00:29:14","guid":{"rendered":"http:\/\/codemyui.com\/?p=1409"},"modified":"2018-05-17T12:17:25","modified_gmt":"2018-05-17T02:17:25","slug":"text-picture-background-pure-css","status":"publish","type":"post","link":"https:\/\/codemyui.com\/text-picture-background-pure-css\/","title":{"rendered":"Text With Picture Background in Pure CSS"},"content":{"rendered":"<p>Ever wanted to put an <a href=\"https:\/\/codemyui.com\/category\/image-effects\/\">image<\/a> into a text, there are some easy ways to do this in Photoshop but what if you want this on a web page with dynamic text? Thankfully there are a few ways to go about doing this. The idea is just to overlay some <a href=\"https:\/\/codemyui.com\/category\/text-animation\/\">text<\/a> over an image and use <code>-webkit-background-clip:text CSS effect<\/code> to get the desired effect. <\/p>\n<p><!--more--><\/p>\n<p>If you are having trouble with the pen, try the archived copy on <a href=\"https:\/\/gist.github.com\/CodeMyUI\/d3143cb06a90a1eee65e951c2485112c\" target=\"_blank\" rel=\"noopener\">GitHub<\/a><\/p>\n<p class='codepen'  data-height='554' data-theme-id='0' data-slug-hash='crlxk' data-default-tab='result' data-animations='run' data-editable='' data-embed-version='2' data-preview='true'>\nSee the Pen -webkit-background-clip:text CSS effect  by Jintos (@Jintos) on CodePen.<\/p>\n\n","protected":false},"excerpt":{"rendered":"<p>Ever wanted to put an image into a text, there are some easy ways to do this in Photoshop but what if you want this on a web page with dynamic text? Thankfully there are a few ways to go about doing this. The idea is just to overlay some text over an image and&hellip;<\/p>\n<a class=\"read-more-link\" href=\" https:\/\/codemyui.com\/text-picture-background-pure-css\/ \">Read More<\/a>","protected":false},"author":2,"featured_media":1412,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[1],"tags":[1745484,30305495,1512930],"class_list":["post-1409","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-image-effects","tag-pure-css","tag-text-animation","col-sm-6"],"acf":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/08\/text-with-picture-background-in-pure-css.gif?fit=880%2C440&ssl=1","jetpack-related-posts":[{"id":12369,"url":"https:\/\/codemyui.com\/animated-text-shadow\/","url_meta":{"origin":1409,"position":0},"title":"Animated Text Shadow","author":"Hima Vincent","date":"March 23, 2017","format":false,"excerpt":"This is pretty cool text animation designed by Carpenumidium, using pure CSS you can add an animated shadow effect to your text. If you are having trouble with the pen, try the archived copy on GitHub Animated Text Shadow Snippet","rel":"","context":"In \"pure css\"","block_context":{"text":"pure css","link":"https:\/\/codemyui.com\/tag\/pure-css\/"},"img":{"alt_text":"Animated Text Shadow","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/03\/animated-text-shadow.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/03\/animated-text-shadow.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/03\/animated-text-shadow.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/03\/animated-text-shadow.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":29834,"url":"https:\/\/codemyui.com\/color-swoosh-through-text-animation\/","url_meta":{"origin":1409,"position":1},"title":"Color Swoosh Through Text Animation","author":"Saijo George","date":"May 10, 2020","format":false,"excerpt":"Code by: Amir from Codepen If you are having trouble with the pen, try the archived copy on GitHub Color Swoosh Snippet","rel":"","context":"In \"text animation\"","block_context":{"text":"text animation","link":"https:\/\/codemyui.com\/tag\/text-animation\/"},"img":{"alt_text":"Color Swoosh Through Text Animation","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/05\/Color-Swoosh-Through-Text-Animation.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/05\/Color-Swoosh-Through-Text-Animation.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/05\/Color-Swoosh-Through-Text-Animation.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/05\/Color-Swoosh-Through-Text-Animation.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":29756,"url":"https:\/\/codemyui.com\/poster-style-text-overlay-on-image-in-pure-css\/","url_meta":{"origin":1409,"position":2},"title":"Poster Style Text Overlay on Image in Pure CSS","author":"Saijo George","date":"April 27, 2020","format":false,"excerpt":"Code by: Sibi13 from Codepen If you are having trouble with the pen, try the archived copy on GitHub Poster Snippet","rel":"","context":"In \"image effects\"","block_context":{"text":"image effects","link":"https:\/\/codemyui.com\/tag\/image-effects\/"},"img":{"alt_text":"Poster Style Text Overlay on Image in Pure CSS","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/04\/Poster-Style-Text-Overlay-on-Image-in-Pure-CSS.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/04\/Poster-Style-Text-Overlay-on-Image-in-Pure-CSS.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/04\/Poster-Style-Text-Overlay-on-Image-in-Pure-CSS.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/04\/Poster-Style-Text-Overlay-on-Image-in-Pure-CSS.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":1355,"url":"https:\/\/codemyui.com\/five-fancy-css-text-effect\/","url_meta":{"origin":1409,"position":3},"title":"Five Fancy CSS Text Effect","author":"Hima Vincent","date":"August 1, 2016","format":false,"excerpt":"In this post, you will see five text CSS effect designed by Stephy Miehle. The first one is a text effect with multi coloured bleeding effect, the second one is a skewed effect with a yellow background, the third one is a 3d candy cane like effect for the text,\u2026","rel":"","context":"In \"3d\"","block_context":{"text":"3d","link":"https:\/\/codemyui.com\/tag\/3d\/"},"img":{"alt_text":"Fancy CSS Text Effect","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/08\/fancy-css-text-effect.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/08\/fancy-css-text-effect.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/08\/fancy-css-text-effect.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/08\/fancy-css-text-effect.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":4139,"url":"https:\/\/codemyui.com\/spooky-light-flickering-effect-text-css\/","url_meta":{"origin":1409,"position":4},"title":"Spooky Light Flickering Effect for Text in CSS","author":"Hima Vincent","date":"November 11, 2016","format":false,"excerpt":"Want to add some spooky effect to your webpage, then this Halloween inspired effect that you can apply to any block of text might be just the thing for you. Using pure CSS Ahmad Shadeed created this snippet. You can highlight a section of that text that will glow brighter\u2026","rel":"","context":"In \"distortion effect\"","block_context":{"text":"distortion effect","link":"https:\/\/codemyui.com\/tag\/distortion-effect\/"},"img":{"alt_text":"Spooky Light Flickering Effect for Text in CSS","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/11\/spooky-light-flickering-effect-for-text-in-css.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/11\/spooky-light-flickering-effect-for-text-in-css.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/11\/spooky-light-flickering-effect-for-text-in-css.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/11\/spooky-light-flickering-effect-for-text-in-css.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":26594,"url":"https:\/\/codemyui.com\/color-cycle-animation-for-text\/","url_meta":{"origin":1409,"position":5},"title":"Color Cycle Animation for Text","author":"Saijo George","date":"July 10, 2018","format":false,"excerpt":"In this cute pure CSS text animation designed by Gabriel Cyrillo you get the rainbow colors cycling through the background. If you are having trouble with the pen, try the archived copy on GitHub Color Cycle Animation Snippet","rel":"","context":"In \"pure css\"","block_context":{"text":"pure css","link":"https:\/\/codemyui.com\/tag\/pure-css\/"},"img":{"alt_text":"Everything_is_theoretically_impossible_until_it_is_done","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/08\/Everything_is_theoretically_impossible_until_it_is_done.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/08\/Everything_is_theoretically_impossible_until_it_is_done.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/08\/Everything_is_theoretically_impossible_until_it_is_done.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/08\/Everything_is_theoretically_impossible_until_it_is_done.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/1409","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/comments?post=1409"}],"version-history":[{"count":1,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/1409\/revisions"}],"predecessor-version":[{"id":26080,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/1409\/revisions\/26080"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media\/1412"}],"wp:attachment":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media?parent=1409"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/categories?post=1409"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/tags?post=1409"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}