Question

I have this situation using CSS.

I want an image to be in the center of the screen, doesn’t matter the size of the screen, always in the middle. That’s pretty easy to do.

But, the image (.png) I want to be in the middle is black and has some transparent letters in it.

So, I want the whole screen to be black, but still have transparent letters in the middle of the screen.

The reason I want transparent letters is because I’m using a script to fill the letters while the page is loading. The idea is based on a progress loading bar, but in this case, using letters as the ‘bar’.

How can I achieve that? I have tried surrounding the image with divs but it’s not the best way since depending on the screen size, some divs may not reach the image and left a blank space.

What do you suggest? What should I read?

Just in case I didn’t make myself clear, here is an image:

Answer 1

The best option I can currently think of, to black out the screen around the centered img is to use box-shadow:

#main {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -250px 0 0 -250px;
    box-shadow: 0 0 0 500px #000;
}​

JS Fiddle demo.

This does, of course, require that the browser supports the box-shadow property (or at least one of the vendor-prefixed implementations), and also takes a fairly arbitrary number for the ‘spread’ of the blur.

Unfortunately, while I’d rather use the border property the border affects the layout and must be compensated for in positioning the img, whereas the box-shadow doesn’t affect the layout of the page.

With this demonstration, obviously, the background-color should be replaced by a background-image or whatever alternative you’re using to represent the loading bar.