background-image<\/code> on an element rather than a content image. Unfortunately there is no super easy\/obvious function for that. <\/p>\nWithin the loop, you’ll have to do:<\/p>\n
$thumb_id = get_post_thumbnail_id();\r\n$thumb_url_array = wp_get_attachment_image_src($thumb_id, 'thumbnail-size', true);\r\n$thumb_url = $thumb_url_array[0];<\/code><\/pre>\nThen $thumb_url<\/code> will be that URL.<\/p>\n","protected":false},"excerpt":{"rendered":"Post thumbnails are pretty useful and pretty easy to use in WordPress. Simply add: add_theme_support(‘post-thumbnails’); To a theme’s functions.php file and you’ll get a Featured Image module on the admin screen for posts which allows you to select one. It is also very easy to output that image as an HTML <img>: get_the_post_thumbnail(); But what […]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":3229,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"page-snippet.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[],"acf":[],"jetpack-related-posts":[{"id":18358,"url":"https:\/\/css-tricks.com\/lodge\/v10\/053-responsive-columns-for-the-gallery\/","url_meta":{"origin":163741,"position":0},"title":"#053: Responsive Columns for the Gallery","date":"September 18, 2012","format":false,"excerpt":"We add in some responsiveness to the grid we have set up for the Gallery. At the widest screens, we have it set at four columns. Then we start adding in breakpoints via our super easy @mixins we have set up and have been re-using all over. At our mama-bear\u2026","rel":"","context":"With 8 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":4293,"url":"https:\/\/css-tricks.com\/snippets\/html\/use-firebug-in-any-browser\/","url_meta":{"origin":163741,"position":1},"title":"Use Firebug in Any Browser","date":"September 29, 2009","format":false,"excerpt":"Just include this script on the site and you'll get a Firebug console that pops up for debugging in any browser. Not quite as full featured but it's still pretty helpful! Remember to remove it when you are done. Bookmarklet Firebug Lite (drag that link to bookmarks bar) Bookmarklet Code\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":18651,"url":"https:\/\/css-tricks.com\/lodge\/v10\/122-building-the-videos-archive-part-1\/","url_meta":{"origin":163741,"position":2},"title":"#122: Building the Videos Archive, Part 1","date":"October 1, 2012","format":false,"excerpt":"The videos archive page is the part of the site where people can browse all the free videos available to watch. It's for browsing, must like the homepage for the snippets or the homepage for the demos. These pages are their own template, which we can very quickly and easily\u2026","rel":"","context":"With 2 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":18734,"url":"https:\/\/css-tricks.com\/lodge\/v10\/152-styling-the-wordpress-lodge-login-page\/","url_meta":{"origin":163741,"position":3},"title":"#152: Styling the WordPress (Lodge) Login Page","date":"October 2, 2012","format":false,"excerpt":"Our \"widget\" for The Lodge in the sidebar of the site (shows on most pages, including homepage) has two states. One for when a user is logged out and one when a user is logged in. The logged out state has a login form right on it so current members\u2026","rel":"","context":"With 2 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":14196,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/g\/general-sibling\/","url_meta":{"origin":163741,"position":4},"title":"General sibling","date":"September 6, 2011","format":false,"excerpt":"The general sibling combinator (~) in CSS looks like this in use: .featured-image ~ p { font-size: 90%; } In that example, you would be selecting all paragraphs in an article that come after the featured image (an element with a class name of \"featured-image\") and making them of slightly\u2026","rel":"","context":"With 9 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":180891,"url":"https:\/\/css-tricks.com\/lodge\/svg\/12-getting-svg-icon-fonts-sets\/","url_meta":{"origin":163741,"position":5},"title":"12: Getting SVG – Icon Fonts & Sets","date":"August 27, 2014","format":false,"excerpt":"Remember that anything vector you can get into SVG. Adobe software is great at this. There could be vector stuff in a PDF - just open the PDF and you'll be able to get your hands on the vector parts. As we saw, stock photography sites often have things in\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/163741"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=163741"}],"version-history":[{"count":4,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/163741\/revisions"}],"predecessor-version":[{"id":298571,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/163741\/revisions\/298571"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/3229"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=163741"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=163741"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}