Hi I would like to know how to line up a background design with the SWF file like in this page: [url]http://www.template-help.com/screenshots/9100/9182.html[/url] As you can see the lines in the background match with lines in the swf file. Thanks Ecinele
@scragarDec 15.2007 — #I do belive that's done by aligning the background image to the center, then using a dead-centre style positioning on the swf file.
looking into it they use a table, horrible idea for something that uses about 6 lines of css.
@ecineleauthorDec 15.2007 — #I didn't think that it was a table because if you grab the side of the internet page and drag it to the left, you will notice that the content never shifts from its place.
firstly to do this you need to know the exact size of your content in the middle, this was OK for them, it was a flash file.
then you need to use CSS to make it the center, so assuming it has an ID of say "deadcentre" and a height and width of 250 and 200px respectivly you get: #deadcentre{ height: 250px; width: 200px; margin-top: -125px; margin-left: -100px; position: absolute; top: 50%; left: 50%; } you can strip this down slightly further if you assume that the centeral content can only have a single value for height and width. If the object is not display: block already you may need to add that line to the CSS.
then simply add you bg: body{ background-image: url(TILEGRAPHICURL); background-position: center; background-repeat: repeat; } and that's about it. if your tiles don't match up correctly you could changing the background-position from "center" to "50% 50%", but you proberly won't need this.
@WebJoelDec 17.2007 — #... if your tiles don't match up correctly you could changing the background-position from "center" to "50% 50%", but you proberly won't need this.[/QUOTE] That's true... but if only [I]one[/I] "position" value is given, the [I]second[/I] value always defaults to "center".
So,
"background-position:center;" means "center center"
"background-positon:top;" means "top center"
"background-position:42%;" means "42% center", -and so forth...
@scragarDec 17.2007 — #That's true... but if only [I]one[/I] "position" value is given, the [I]second[/I] value always defaults to "center".
So,
"background-position:center;" means "center center"
"background-positon:top;" means "top center"
"background-position:42%;" means "42% center", -and so forth...[/QUOTE]
this is exactly why I had centre on it's own, "50% 50%" is positioned with it's top left 50% from the top, and 50% from the left, so it's not actualy in the centre. Meanwhile "center" on it's own would render it in the center of the page exactly, allowing for a difference based on if ecinele needs the tile in the middle, or the tiles to join together around the middle.
@WebJoelDec 17.2007 — #this is exactly why I had centre on it's own, "50% 50%" is positioned with it's top left 50% from the top, and 50% from the left,...[/QUOTE]that's what I figured from seeing your code, that "center" (or "center center") was what you needed. ?