In this CSS Video Tutorial we learn how to replace plain text elements with CSS background images. This is a great strategy to improve your SEO (search engine optimization) performance, and also increase accessibility.
If you would rather learn from a single, unified video course instead of individual one-off video tutorials check out my 8 hour video course and learn pro-level HTML, CSS, and responsive design.
Hello Brad,
I just recently discovered your videos in YouTube and I’m impressed with your clarity in explaining this subject that over the years it was completely Greek to me; even managing to do some websites (I don’t know how) thinking that with the WYSWYG editors was enough.
Now, trying to follow your tutorials I wanted to apply a class to four different images and two of them obey the orders the other two don’t. Can you explain to me what it’s wrong with the code?
.ic{
text-align: center;
margin: 0 auto;
}
Two of the images centred alright the other two didn’t obey and aligned to the left of the page.
I appreciate your help. Thanks in advance.
Hi Marta,
I just created a new video about center aligning images:
http://www.youtube.com/watch?v=jiA7BRTL1A0&list=UUHRp19HU7Y2LwfI0Ai6WAGQ&index=1
The “text-align: center;” method requires the image’s parent element to have that style instead of the image itself. If you make the image a block level element instead of an “inline” element (by using “display: block;”) then you can use “margin: 0 auto;” on the image itself to center it.
Thanks!
Brad