Skip to page content

Bite Size Standards

Bite Size Standards offers concise web development tutorials, tips, and tricks written by designers and developers who are passionate about web standards. More about us

Recently
Supercharge your image borders
CSS values for colors
CSS selectors: the basics
Coloring text-decoration
Centering an image, Part 2
Centering an image, Part 1
Easy cross-browser transparency
Become a Bite Size Standards author
Bite Size Standards relaunches
Equal height excerpts with ems

Centering an image, Part 2

Maurício Samy Silva | 6 January 2007

In Part 1 of this article we explained that there are two techniques you can use to place an image within a block level element:

  1. Wrapping the IMG element in the block level element, within the markup;
  2. Setting up the background-image CSS property for the block level element.

The technique you choose depends on your needs. In this article we will focus on centering a background image using CSS.

We will use a 400x200 DIV and a 310x150 image as examples for this article. The DIV will have a 1px solid red border for clarifying purposes only.

Centering an image using the background-image CSS property

This is the easiest and most flexible way to center an image, and is appropriate for presentational images that don't contain content. The markup contains only the DIV container for the image and we will use the CSS background property to position the image.

The following lines of code do the work:

CSS

 div.back-image { width:400px; height:200px; border:1px solid red; background-image:url(path/bob.jpg); background-repeat:no-repeat; background-position:center center; }

HTML

 

These lines of code will center the image within the DIV.

Finally, for the sake of simplicity, we can apply the shorthand declaration for our background property and rewrite our CSS like this:

 div.back-image { width:400px; height:200px; border:1px solid red; background:url(path/bob.jpg) no-repeat center; }

The CSS2.1 specs – Section 14.2.1 says:

If only one percentage or length value is given, it sets the horizontal position only and the vertical position will be 50%.

~ CSS2.1 Specification

That's why I've only added the center value for the background-position property.

References

About the Author

Maurício Samy Silva (AKA: Maujor) is a web standards advocate located in Rio de Janeiro, Brasil. When he is not writing tutorials and articles on his CSS para Web Design site or on Maujor’s Blog he can be found on the floor, driving cars, trains, trucks, dolls, and all sort of boy’s and girl’s toys with his four years old grandson and granddaughter.

Articles by Maurício Samy Silva

5 Comments

| Post a comment | Comments Feed

  1. Kilian ValkhofKilian Valkhof�s site : http://kilianvalkhof.com

    6 January 2007, 23:03 : Permanent link to comment

    I wasn’t aware that omitting one percentage value would center it both vertically and horizontally, nice bit(e) of knowledge there :)

  2. webweb�s site : http://www.ericwebster.net

    13 January 2007, 14:35 : Permanent link to comment

    Interesting, what about accessibility? If this image is meant for content and not for design you could also put the image tag inside the back-image container, then with css hide it.

    Because the image would be cached, this should not increase download time.

  3. ShimonShimon�s site : http://www.chossonandkallah.com

    14 January 2007, 19:04 : Permanent link to comment

    Is it semanticly right?

  4. SuSu�s site : http://

    15 January 2007, 01:42 : Permanent link to comment

    [...]and is appropriate for presentational images that don’t contain content.

    Web: What?

    Shimon: Are you just asking, or implying it’s not? If it’s strictly a presentational image, then there aren’t really any semantics to be worried about, no?

  5. David LevinDavid Levin�s site : http://www.angrysam.com

    17 January 2007, 23:01 : Permanent link to comment

    Nicely done. very clean.

    Will the same CSS work if you use percentage width for the DIV (percent height is a whole new nightmare)?


Commenting is closed for this article.

© Copyright 2006 Bite Size Standards and Authors