Header banner centre div, Trying to make the main header banner of my site central |
Header banner centre div, Trying to make the main header banner of my site central |
aBhorsen |
Feb 28 2012, 01:52 PM
Post
#1
|
Group: Members Posts: 6 Joined: 28-February 12 Member No.: 16,594 |
Basically I want my site centre aligned so that no matter the browser the inherent properties are that the header is central and the content divs are central.
I appreciate that the banner will be too big at 750px for some browsers but assuming the user has a browser that fits the page in it's entirety, how do I have the banner and site central? That feels like a poor explanation. My css for my header currently looks like: #header { width:750px; height:154px; background-position:center; color:white; background-image:url(../images/header.jpg) } As it stands, the background-position is doing nothing. |
Darin McGrew |
Feb 28 2012, 01:57 PM
Post
#2
|
WDG Member Group: Root Admin Posts: 8,365 Joined: 4-August 06 From: Mountain View, CA Member No.: 3 |
QUOTE As it stands, the background-position is doing nothing. Technically, it is centering the background image within the #header element. But my guess is that the header element size (specified by the width and height properties) is the same as the image size. Centering a 750px image within a 750px div isn't going to look very different from left-aligning (or right-aligning) a 750px image within a 750px div.To center the div elements (both for your header and for your content), see: http://www.w3.org/Style/Examples/007/center.html http://dorward.me.uk/www/centre/ Since this is about CSS rather than markup, I'm moving it to the CSS forum. |
aBhorsen |
Feb 28 2012, 01:59 PM
Post
#3
|
Group: Members Posts: 6 Joined: 28-February 12 Member No.: 16,594 |
QUOTE As it stands, the background-position is doing nothing. Technically, it is centering the background image within the #header element. But my guess is that the header element size (specified by the width and height properties) is the same as the image size. Centering a 750px image within a 750px div isn't going to look very different from left-aligning (or right-aligning) a 750px image within a 750px div.To center the div elements (both for your header and for your content), see: http://www.w3.org/Style/Examples/007/center.html http://dorward.me.uk/www/centre/ Since this is about CSS rather than markup, I'm moving it to the CSS forum. Magic, Thank you Darin. That gives me a good place to start. Cheers for the links. |
Lo-Fi Version | Time is now: 18th April 2024 - 03:57 PM |