EDIT: Now I've specifically what I need: Basically I am using this: "background-position: top center;" What I tried is adding this too: "background-position: 25px 0px;" Basically I can't find a way to BOTH center the background AND specify that it needs to go 25px under the top. Is there a way to mix these or am I missing something? When I try to do something like "background-position: 25px center;" it actually doesn't quite work and seems to make everything disappear (either that or it's hiding behind another div all the sudden).
Even when I cut out the images on both sides and just try to use a banner and a background it STILL happens. Or it gets too fixed and won't move when not being squished. I have no idea what I'm doing wrong.
I don't know if this will work with tables (which you should not be using!), but try adding: margin: 0 auto; Code (markup): to the class you are trying to center.
When you are using your css code, make sure you also use the Align: center; it will help to center, and if you have your pixels set to % instead of px then it will help to shrink and keep the resolution the same no matter what resolution the screen is in or when it is expanded.
I forgot the background-position. :/ Anyways I'm new to divs. Why? Well I learned most of my html waaay back in high school and I never looked back at most languages besides some xhtml and css. You know, back when tables were cool and every page had animated gifs everywhere. Plus my teacher way back when told us to table table table. How would I make this code work: #bgbanner { background:url(images/bgbanner.jpg) no-repeat 0 0 #fff; background-attachment:fixed; background-position: top center; min-width: 0px; max-width: 1096px; width: 1096px; margin: 0 auto; padding: 0; alight: center; } It almost works right now. Also it has crap I don't need which I'll just cut out myself but the problem is I seem to need to us "background-position: top center;" in order to make the picture go past the left border and stay pretty but at the same time that coding puts it at the VERY top center of the page. I'll need to use this coding in at least 3 separate areas of the page. 3 areas will need the ability to go past the left border for the design to not break. Basically all 3 will have to be in the center but at different levels downwards (1 is the top banner, 1 is right below that, another several hundred pixels down). Is there a way to use that position top center code but make it not quite top but a defined distance downwards?
Basically at this point I'm understanding div positioning but I can't get a div to be positioned where I want it at the same time that I'm positioning the background image in a div to be centered and go off the left of the screen with the background-attachment: fixed and background-position: top center;. When I try to BOTH put a div in a specific place and then tie in the background image to a specific place in the div it screws up.
I've ALMOST got it. However the background image REFUSES to move WITH the DIV. So if the div is on the bottom of the screen it's non-repeating background image will be a the top left. I know that I'm specifying to put the background in the top left but how would I go by, similarly to divs, positioning a background image? When I use "top: 25;" and all that it's talking to the div and not the background image. How would I talk the the background image in a similar way? Here's my current code: <style> html, body { font-family: "Arial", Times, serif; font-size: 11px; margin: 0px auto; margin-bottom: 0px auto; } #bgbanner { background:url(images/bgbanner.jpg) no-repeat 0 0 #fff; background-attachment:fixed; background-position: top center; min-width: 0px; max-width: 100%; width: 100%; margin: 0; padding: 0; } #banner { background:url(images/banner.jpg) no-repeat 0 0 #fff; background-attachment:fixed; background-position: top center; min-width: 0px; max-width: 100%; width: 100%; margin: 0; padding: 0; } </style> <title>James Z. Feng</title> </head> <body> <div style="background:url(images/topdetail.jpg); background-position:center; background-repeat:repeat-y; background-color:#031829; height: 25px;"><i><font size="+1" color="#FFFFFF"><center>Asian-American Filmmaker: Actor - Writer - Director - Producer - Hip Hop Musician</center></font></i></div> <div id="bgbanner" style="background-color:#031829; position: absolute; top: 100px; height: 180px;"></div> <div id="banner" style="background-color: transparent; position: absolute; top: 25px; height: 180px;"><center><img src="images/banner.jpg" align="top" /></center></div>
Now I've specifically what I need: Basically I am using this: "background-position: top center;" What I tried is adding this too: "background-position: 25px 0px;" Basically I can't find a way to BOTH center the background AND specify that it needs to go 25px under the top. Is there a way to mix these or am I missing something? When I try to do something like "background-position: 25px center;" it actually doesn't quite work and seems to make everything disappear (either that or it's hiding behind another div all the sudden).
Oh my gawd I got it working. Took half the freakin' day and all it was... like... 4 stupid stupid errors. This last one I just reversed a few stupid numbers! This is why I often hate coding! Sorry for the double and now triple posts! Thanks for the help!