Custom HTML advanced formatting: Assistance - html

Question

I want to ask a few questions regarding advanced HTML formatting of my homepage in this case.
Some background to my problem:
I am using a content management system called "Joomla!" to manage my site.
Here is a link to my site under construction... Smart-Drones.
At this point I have designed exactly how I want the website to look by basically "drawing it" using paint.net. I have all of the graphics on different layers so that I can save them and insert them into the web page as PNGs.
Basically this is how I want my website landing page to look:
(since I can post pictures with my "reputation of <10" please refere here: http://forum.joomla.org/viewtopic.php?f=706&t=858845)
The way the Joomla! Content Management System works is by splitting the website into modules which are in specific positions.
Inside each "position" is a space that can be formatted using HTML and my home page is one big HTML module so it's basically a bog standard HTML page.
You can see from the images attached that the landing page requires a large background image (which provides framing for the page). The background image is a PNG and has the Fibonacci patterns as well as a large picture in the center of the page.
I want to overlay more elements, such as images, buttons and text over that background image. I also want to be able to precisely position the HTML elements.
The image below should give an idea of how I need to position the elements:
I have been trying to formulate the page using a WYSIWYG editor called JCE (Joomla Content Editor) but have been having no luck. It just refuses to work and is so fickle to work with!
I tried to insert a div and then add the background image and to position the elements over that image using 'absolute positioning' but the farthest that I have managed to get is what you can see on the home page, a mess:
The WYSIWYG editor has generated this code:
<div style="background-image: url('images/Backgrounds/Smart-Drone-Golden-Background-With-Drone.png'); background-repeat: no-repeat; background-position: center center; width: 799px; height: 906px; position: relative;"> <img style="position: absolute;" src="images/logo/Smart-Drone-4-logo.png" alt="Smart-Drone-4-logo" /><span class="h3" style="position: absolute;"><span class="h4" style="color: #ffffff; position: absolute;">INTRODUCING THE ALL <span style="color: #ffcc00;">NEW</span></span><span style="color: #ffab00;"><span class="h4"></span> </span> </span>
</div>
Not pretty, so I ask the community...
...How do you normally go about this process? It should be fairly standard procedure but my searches have turned up no practical advice.
Any advice or links to tutorials that may be of help will be greatly appreciated.
Best regards,
Jethro.
http://forum.joomla.org/viewtopic.php?f=706&t=858845

Answer 1

Emmanuel is basically right about the site layout edit abilities of tinyMCE. But Joomla's tinyMCE integrates buttons for formatting. That means you can add your own formats via a file called "editor.css" which is placed in your template /css folder. All defined classes in there are integrated into tinyMCE. So if you want to set background images via tinyMCE your best bet is to create or edit the editor.css and add something like the following.
editor.css example:
.my-background {
background-image: url('images/Backgrounds/Smart-Drone-Golden-Background-With-Drone.png');
background-repeat: no-repeat;
background-position: center center;
width: 799px;
height: 906px;
position: relative;
}