Header Centered on body instead of stretched whole screen

To me the AGG logo is within the width. Maybe I am not seeing what you are seeing. Do you have a snapshot?

I am not talking about the AGG logo buy the header image behind it, with the grass and ball and club.

Right now the image is set to 2000 x 123 pixels, if I change the image to 868 pixels, it still spans the entire screen and just repeats its self as many times as needed to fill the screen.

I just want the header image (grass, ball, club) to be centered above the body of website, and the sides to show the background image.

https://www.AverageGuyGolf.com

Then you have to change your code

#header {
background: url("images/header_image.jpg") repeat-x top center;
border-bottom: 6px solid white;
clear: both;
color: white;
float: left;
height: 120px;
margin: 0;
padding: 0;
width: 100%;
}

to this

#header {
background: url("images/header_image.jpg") no-repeat top center;
border-bottom: 6px solid white;
clear: both;
color: white;
float: left;
height: 120px;
margin: 0 auto;
padding: 0;
width: 868px;
}

That worked but it didn’t center the image, the image starts at the far left of the screen

You can try changing the values for

background: url(“images/header_image.jpg”) no-repeat top center;

to something like

background: url(“images/header_image.jpg”) no-repeat top 200px;

by changing the “center” to a X coordination value instead. It’s probably because your image is much larger than the 868 width. Or you can try to crop/adjust your image and upload it again.

#header {
background: url(“images/header_image.jpg”) no-repeat top center;
border-bottom: 6px solid white;
clear: both;
color: white;
float: center;
height: 120px;
margin: 0 auto;
padding: 0;
width: 868px;
}

I changed the float to center and it works, however I forget my theme is slightly off center. I need that float to be center but -24px to the left, and I am not sure how to write that in code.

#header {
background: url(“images/header_image.jpg”) no-repeat top center;
border-bottom: 6px solid white;
clear: both;
color: white;
float: center;
height: 120px;
margin: 0 auto;
padding: 0;
width: 868px;
}

I changed the float to center and it works, however I forget my theme is slightly off center. I need that float to be center but -24px to the left, and I am not sure how to write that in code.

Actually float: center doesn’t exist. It’s only for left or right. So it will probably cause problem with different screen dimensions and the behavior will be quite different across different browsers.

https://www.w3schools.com/css/css_float.asp

To change the image position. Checked out your site, but I see that the theme uses a lot of <center> tags (deprecated long time ago), and using unnecessary text-align: center, text-align: left, tt’s not a good standard practice. That’s why the code will be hard to maintain.

Personally I think the theme needs some overall revamp (just my opinion).

I am not saying your wrong, in fact I am sure you are right but how came it aligned to the left, but when I chagned the float to center it centered the image, in IE, Chrome, Firefox and Safari?

I don’t have the answer for that, but float: center doesn’t exist, it was never implemented in CSS. So people had to use hacks to pull that off, for example:

https://thewebthought.blogspot.com/2011/06/css-float-center-yes-we-can-do-it.html

It’s possible that float: center was ignored but something else like the parent HTML tags is affecting the image positioning.

So basically there is no way to achieve what I am trying to do?

All I can say is if “float: center” works, just go for it now.

it works but not perfectly as the body of my theme is -24px off center. So I need it to center but center -24 pixels to the left.

I deleted float out of the header completely and it didn’t change anything, so maybe changing float to center, just turned the float off since float center doesn’t exist?

so now my code looks like this,

#header {
background: url(“images/header_image.jpg”) no-repeat top center;
border-bottom: 6px solid white;
clear: both;
color: white;
height: 120px;
margin: 0 auto;
padding: 0;
width: 868px;
}

which centers it but still off by that 24 pixels. Does anyone know how to change that top “no-repeat top center;” to be no repeat and center -24 pixels to left?

I think you should first fix the source of that -24px off problem, hire an CSS expert if necessary. Because it shouldn’t be off like that in the first place. Or else it’s going to be just a temporary band aid and any further fixes may cause other kind of unseen problems.

And the best advice I can give you is to tryout with trials and errors, with -24px, adding a parent <div> if necessary.