May 29, 2012

CSS Background Image Replacement Tutorial

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.

About the Author

Brad Schiff

Brad Schiff is a front-end developer, designer, and educator who has been building user interfaces for over a decade. He’s done work for Fortune 500 companies, national political campaigns, and international technology leaders. His proudest achievement is helping people learn front-end web development.

Follow Brad on Twitter Subscribe on YouTube

2 thoughts on “CSS Background Image Replacement Tutorial

  1. 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?
    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.

  2. Hi Marta,

    I just created a new video about center aligning images:

    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.


Leave a Reply

Your email address will not be published. Required fields are marked *