Question

for the reference: Check this:
http://jsfiddle.net/blackvibes/mVYwd/

I’m creating a website for mobile (it’s pretty sure not the best way to do it.. but anyway) I’m using percentages all the way, since it should be relatively equal in size on any mobile (portrait) screen.

I’ve tried numberous things, such as:

#header img {
vertical-align:middle;
padding-top: auto;
padding-bottom: auto;
margin-top: auto;
margin-bottom: auto;

}

But I still can’t get it working.

The only thing that will be in that div is that single image, which presents the school logo.

Thanks in advance!

Answer 1

Use your image as the background of your #header id:

#header img {
    background:url(your_image.jpg) center center no-repeat;
}