How to Replace text with image in CSS

💻 Want to work from home?

► Get Filip a coffee so he can work longer at night :)

► LET'S CONNECT:

Project Resources:

Tools:

Brackets, FREE code editor:
Emmet, super speed coding addon:
Beautify, turning your ugly code into beautiful script:

Transcription:

Hi, and welcome to the tutorial where we will replace our right text with the image in the CSS. In this case with CSS logo. Okay, let's make our H1 class replace with an image. We have our H1 class so we go to our main CSS and add to our H1,. we add text-indent to be -9999 and our text disappeared. So, where our text go? Our text go to the left 9000 pixels so as you can see what if we add the 90 pixels see it will move if we add 150 pixels you can see that the moves on the left okay let's just turn back. Background, we add an image to our background. Url, and will add our image, I prepare CSS logo image, as you can see, I will paste over here, I'm sorry. Okay, we got our image and it's a bit, it looks a bit clumsy, so we just no-repeat, so we have only just one image and this is very important. We need to add height, to be 300 pixels, and we have our image. And as you can see we just replaced H1 with CSS image. And this is it thanks for watching and bye-bye.