Centering an image | Part 2 | Bite Size Standards

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:

Wrapping the IMG element in the block level element, within the markup;
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


<div class="back-image"></div>

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

Permanent link | Filed under: Cascading Style Sheets (CSS)

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

Kilian Valkhof : 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 :)
web : 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.
Shimon : http://www.chossonandkallah.com

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

Is it semanticly right?
Su : http://

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

<i>[...]and is appropriate for presentational images that don’t contain content.</i>

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?
David Levin : 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.