{"id":178,"date":"2019-10-12T11:36:37","date_gmt":"2019-10-12T10:36:37","guid":{"rendered":"https:\/\/www.freelancewp.guide\/?p=156"},"modified":"2019-10-12T11:36:37","modified_gmt":"2019-10-12T10:36:37","slug":"set-img-src-using-just-css","status":"publish","type":"post","link":"https:\/\/freelancewp.guide\/set-img-src-using-just-css\/","title":{"rendered":"Set src using just CSS"},"content":{"rendered":"\n

Sometimes we need to change the src of an <img> element, but we don’t have access to the HTML, like when styling a plugin.<\/p>\n\n\n\n

But, CSS is our friend here, and we can use the url<\/em> pseudo element to set the <img> src.<\/p>\n\n\n\n

<style><\/code>
.my-class {<\/code>
content:url(\"http:\/\/imgur.com\/SZ8Cm.jpg\");<\/code>
}<\/code>
<\/style><\/code>
<img class=\"my-class\"><\/code><\/p>\n\n\n\n

Check out this JSFiddle<\/a>. Should work in IE9 and all new browsers.<\/p>\n","protected":false},"excerpt":{"rendered":"

Sometimes we need to change the src of an <img> element, but we don’t have access to the HTML, like when styling a plugin. But, CSS is our friend here, and we can use the url pseudo element to set the <img> src. <style> .my-class { content:url(“http:\/\/imgur.com\/SZ8Cm.jpg”); }<\/style><img class=”my-class”> Check out this JSFiddle. Should work in […]<\/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,"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""}},"footnotes":""},"categories":[2],"tags":[],"_links":{"self":[{"href":"https:\/\/freelancewp.guide\/wp-json\/wp\/v2\/posts\/178"}],"collection":[{"href":"https:\/\/freelancewp.guide\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/freelancewp.guide\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/freelancewp.guide\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/freelancewp.guide\/wp-json\/wp\/v2\/comments?post=178"}],"version-history":[{"count":0,"href":"https:\/\/freelancewp.guide\/wp-json\/wp\/v2\/posts\/178\/revisions"}],"wp:attachment":[{"href":"https:\/\/freelancewp.guide\/wp-json\/wp\/v2\/media?parent=178"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/freelancewp.guide\/wp-json\/wp\/v2\/categories?post=178"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/freelancewp.guide\/wp-json\/wp\/v2\/tags?post=178"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}