Problem description:
Ran across this and I'd like to know exactly how they did this, I'd like to give it a try.
http://www.byond.com/games/darkmoonproductions/ narutofinalfight
After playing with it I figured out what you pointed out.
What I can't figure out is, how they get the image to display in the background. Directly copy and pasting this code as a test basically just pastes their hub directly into the edit box area of my hub. | |
The DIV that contains the background image is set to position: fixed and a z-index of -1. That will pop it out of the page flow hierarchy and lay it under just about anything else on the page.
| |
No clue. I disagree with your "should" work bit. This definitely shouldn't work.
| |
All they did was mess around with the z-index to place it behind everything else as Ter13 has already said. Just take a look at z-index and have a play around with a test hub, if all else fails Google z-index and find out how to layer properly.
Edit: You could always just go crazy and override the entire website with !important, but then nobody would visit your hub... | |
This has been solved relatively. Also what you said is only half true. There's more to it than that. Thanks tho.
| |
Would you care to share? It's a bad idea to share the solution to this because it involves a security hole that should never have happened. Like I said above: "This definitely shouldn't work." | |
<div id="hub_long_desc_contents"><div width="490px" style="/**/position:fixed;*/pointer-events:none;z-index:-1;"><img src="http://pre03.deviantart.net/3de0/th/pre/f/2014/208/8/b/ninpo_online_by_johnliriano-d7sgohc.png" width="200%" style="pointer-events:none;z-index:1;margin-left: -75%;margin-top: -75%;"><br></div><div width="490px" style="/**/position:fixed;*/pointer-events:none;z-index:-1;"><br>
<img src="http://puu.sh/jKVQH/9d1df130ab.png" width="100%" style="pointer-events:none;z-index:1;margin-left: 50%;margin-top: -60%;"><br></div>
<div width="490px">
<center><img src='http://i201.photobucket.com/albums/aa28/ArgonX19/8lxy9vys_zps3218828b.png'></center>
<br>
<center><font size="4"><b><font color="blue">Version 4 Alpha Testing Has Finally Arrived!</font></b><br>
<font size="1"><b><br>
<!--/defang_center--><br>
NFF is a game roughly based off of the Naruto Storyline along with fan-fictional elements and storyline created from the actual timeline of the game recorded. NFF takes place over 300 years after the events of Naruto Shippuden, the history of this game and events that happened along the way becoming recorded and recognized as the story that creates NFF. Events such as why the Uchiha are in Sound, or why the Senju Clan is now named Kusakin, or why there are only 4 villages are explained in the storyline of NFF. The actions of the players affect what happened, so it can roughly be described as a RPvP.<br></b><br>
<br>
<br>
Featuring:</font></font>
<ul>
<li style="list-style: none"><font size="4"><font size="1"><br></font></font></li>
<li><font size="4"><font size="1">A fun combat system, making skill a primary factor in the equation.</font></font></li>
<li><font size="4"><font size="1">An Interesting Community, Ready to start drama in the game that won't have you annoyed, leaving you always something to do.</font></font></li>
<li><font size="4"><font size="1">Complete Creation, allowing you to create your character and be different from anyone else.</font></font></li>
<li><font size="4"><font size="1">Original Progression System, A system to make the game more balanced that no other game we know has. No more cliche leveling system, but a system based on passives that'll keep you less focused on training but more on the actual game.<br></font></font></li>
<li><font size="4"><font size="1">And much more!</font></font></li>
</ul>
<font size="4"><font size="1"><br></font></font>
<hr>
<font size="4"><font size="1"><br>
We are currently trying to improve and bring this game back into the right direction! <b>This game is in its Alpha stages, meaning there is a lot of updates and changes taking place.</b> If you wish to help us or give off any other constructive criticism.<br>
<br>
<br></font></font>
<hr>
<font size="4"><font size="1"><br></font></font>
<center><font size="4"><font size="1"><br></font></font>
<div align="center"><font size="4"><font size="1"><a href="#" rel="nofollow"><font face="verdana"><img src="http://www.hit-counts.com/counter.php?t=MTIwNDk1OA==" border="0"></font></a></font></font></div>
<font size="4"><font size="1"><br></font></font></center>
<font size="4"><font size="1"><br>
<!--/defang_div--></font><!-- close mismatched tag --></font></center>
<!--/defang_font--><!--/defang_font--><!-- close unclosed tag --></div></div>
</div>
The first few lines in particular appear to be the ones dictating the images that show up in the "background."