Please help with my header image

Hi guys,

Can you help me fix the header image of my blog. I had a job and about limited hours fixing it. Whats wrong with it?. I adjust the HTML header width but i can't fit into the full header.
So guys, Please help..

here is my blog:
bitoysworld.blogspot.com

Thanks guys..

 

first I would recomend you to use a stylesheed for the css part.

this is the code you are using to display the headerarea

<div id='header-wrapper'>
<div class='header section' id='header'><div class='widget Header' id='Header1'>
<div id='header-inner'>
<div class='titlewrapper'>
<h1 class='title'>
Bitoy's  World
</h1>
</div>

Code (markup):

this is the css part

#header-wrapper {
margin: 0;
height:300px;
width:1200px;
background: url('http://i217.photobucket.com/albums/cc78/cricketman_84/up.jpg') no-repeat top left;
overflow: hidden
}

Code (markup):

what you need to do is to change the margin: 0; to margin: 0 auto;

I'm not sure if the headerpicture got it'S own div if yes thats all if not I would recomend you to create a div for it

 

How can I make a DIV for it? Where can I put it in my codes?..thanks dude..

 

this should be the code you need to use

<div id='header-wrapper'>
<div class='header section' id='header'>
        <div class='widget Header' id='Header1'>
               <div id="header-images">
                       <div id='header-inner'>
                       <div class='titlewrapper'>
                       <h1 class='title'>Bitoy's  World</h1>
                </div>
         </div>
</div>

Code (markup):

you will also have to create a new css part like this and change the widget Header like it'S needed

#header-image{
margin: 0 auto;
background-image: url(theurl);
background-repeat: no-repeat;
width: 23px;
height: 2342px;

Code (markup):

you will need to check on the px and all this stuff

 

I NOTICED one thing.The size of the image is still 1024 width even if i resize it to 1200 and uploaded it to photubucket..Any thoughts?

 

well you don't need to change the width of the image keep it 1024 otherwise people with lower screen resulution will have problems.

the image div has to have the width of 1024 and the complete header one a width of 100% then the centering will work

 

It also does not work..I just change the body width on it to make it aligned..What is the wrong with your code?

 

yout problem is that there is no extra div for the header-image and that'S why it's not working so there is no mistake in my code