The latest articles on DEV Community by Mike (@inurfacejerks). https://dev.to/inurfacejerks https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F190504%2F6e12c90c-db7f-4948-9ade-758521a7b403.jpg https://dev.to/inurfacejerks en Mike Mon, 10 May 2021 00:35:07 +0000 https://dev.to/inurfacejerks/how-to-place-background-image-using-before-pseudo-selector-51cn https://dev.to/inurfacejerks/how-to-place-background-image-using-before-pseudo-selector-51cn <p><iframe height="600" src="https://codepen.io/mikedev-frontend/embed/RwpPyNN?height=600&amp;default-tab=result&amp;embed-version=2"> </iframe> </p> <h2> Hello everyone! I've been on DEV for a while now and have always wanted to get my hands dirty posting stuff and showing off the skills I've learned. </h2> <p>Well, this is my first post I thought fit to share as it is something that I was curious about but never made the time to try out. </p> <p>Today I'm gonna look at how to add a background image using the::before pseudo-element. </p> <p>My research into this nifty trick took me to the Geeks for Geeks website and they have it all laid out pretty nice and easy to follow, although I just made some small adjustments to make the layout look how I wanted all of the magic is from Geeks for Geeks, so big thanks to them for helping me to understand this.</p> <p>I hope my post will clarify the ins and outs for any other beginners out there who are looking to try this out. </p> <p>Ps. There is this annoying blur on the button I'm still trying to figure out what that is :)</p> codepen