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 :)
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.
background:url("green-part") repeat-x top;}
Then the div#apDiv1 can center the black part over the green part.
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
thanks so much that was driving me up the wall :)