How can I horizontally align the following header image? - html

Question

I have tried the whole afternoon but I'm missing something, can some one help me with this?
The page can be found at the following link
The page with the image that I need fixed.
The code containing the image is:
<headerimage><span>
<img width="1920" height="600" src="http://www.websu.it/wp-content/uploads/2012/11/suitsheader.jpg" class="attachment-post-thumbnail wp-post-image" alt="Suits Header" title="Suits Header"></span>
</headerimage>
I would like to horizontally center the image with a width of 1920px on smaller screens. When I give a class the property background-position: top center, it works perfectly, but when I need to have a -tag in the page itself I can't seem to make it happen.
Please help me see it :) It's probably very stupid, haha.
Thanks so much!

Answer 1

Set margin: 0 auto; on the image, like:
<headerimage>
<span>
<img style="margin:0 auto;" width="1920" height="600" src="http://www.websu.it/wp-content/uploads/2012/11/suitsheader.jpg" class="attachment-post-thumbnail wp-post-image" alt="Suits Header" title="Suits Header">
</span>
</headerimage>

Answer 2

I would not put this in as an image but as a background on your header.
background-image:url('http://www.websu.it/wp-content/uploads/2012/11/suitsheader.jpg');
background-position-x:center;
background-repeat:no-repeat;
see http://jsfiddle.net/dwat001/Q58YZ/ for a rough demonstration.

Answer 3

Another approach if you cannot use background-image is to use javascript to position the image.
<style>
#imageHolder {
overflow: hidden; // if image is bigger then holder, clip the image, no scollbars.
}
#wideHeaderImage {
position: relative; // treat "left" as relative to the images normal position.
}
</style>
<headerimage id="imageHolder">
<img id="wideHeaderImage" width="1920".../>
</headerimage>
<script src="jquery"></script>
<script>
// create function to center image;
var centerImage = function($) {
var windowWidth = $(window).width(); // get the current width of the window
var imageSize = $('#wideHeaderImage').width(); // get width of image
$('#imageHolder').width(windowWidth); // set the containing element to be size of window.
if(imageSize > windowWidth) { // if image is wider then window
var offset = (imageSize - windowWidth) / 2; // Establish an offset
$('#wideHeaderImage').css('left', '-' + offset + 'px'); // apply offset
}
};
jquery(function($) {
// this code runs within on load
// register a resize event handler
$(window).resize(function(event){centerImage($);});
// resize once on onload.
centerImage($);
});
</script>
I have not run this so I've problably made some mistakes hopefully enough for you to get the gist of what I'm doing.