View Full Version : keep a fixed div centered on window resize??

08-17-2010, 02:45 AM
OK so I've got a header/banner thats 2000x100 px - 2000px width to ensure the header will always be visible regardless of what resolution your monitor is. At the moment I've got the header as the background of a div in fixed position to get rid of the scroll bars, but I want it to always be centered when the window is resized, How do I do this?

Heres a test I did:


I want the 'HEADER TEST' text to always be centered when you resize the window.

Thanks in advanced :)

08-17-2010, 02:50 AM
Make your width: 100%

Welcome in advance

08-17-2010, 03:05 AM
Welcome to CF!

This is an over-complicated way that can be applied to different scenarios. I dont know how useful it will be though.. :D

You can do it with two backgrounds. One that is attached to the <body> and one that is attached to the div#apDiv1.

This method also guarantees that someone who does have a resolution over 2000px still gets a complete header.

Repeat the green part down the x-axis.

body {
background:url("green-part") repeat-x top;}

Then the div#apDiv1 can center the black part over the green part.

#apDiv1 {
background:url("black-part") center top no-repeat;
margin:0 auto; <---centers
width:1000px; <---new width for the black part


08-17-2010, 03:49 AM
OMG changing it to 100% did the trick! cant believe it was just that lol. thanks so much that was driving me up the wall :) but doing that would mean if someone had a resolution over 2000px then the header would stretch to fit it? though dont think that would matter anyway.

thanks ch4sethe5un :) that sounds like a good way, though that header test was just block colours the green has no actual relevance, the final thing will be one long image so with your method I guess you would see the seams, but I still wanted to know how to do it so thanks anyway lol

08-17-2010, 04:26 AM
thanks so much that was driving me up the wall :)
Been there.