在这种情况下，我想问一些关于我的主页的高级HTML格式的问题。
问题的一些背景：
我正在使用名为“Joomla！”的内容管理系统。管理我的网站。
以下是我正在建设中的网站的链接... Smart-Drones。
此时我已经使用paint.net基本上“绘制它”设计了我想要网站的外观。我拥有不同图层上的所有图形，以便我可以保存它们并将它们作为PNG插入到网页中。
基本上这就是我希望我的网站着陆页看起来的样子：
（因为我可以发布我的“声誉为＆lt; 10”的图片，请在此参考：http://forum.joomla.org/viewtopic.php?f=706&t=858845）
Joomla的方式！内容管理系统的工作原理是将网站分成特定位置的模块。
在每个“位置”内部是一个可以使用HTML格式化的空间，我的主页是一个大的HTML模块，所以它基本上是一个标准的HTML页面。
您可以从附带的图像中看到，着陆页需要一个大的背景图像（为页面提供框架）。背景图像是PNG，具有斐波纳契图案以及页面中心的大图片。
我想在背景图片上叠加更多元素，例如图像，按钮和文字。我还希望能够精确定位HTML元素。
下面的图片应该让我知道如何定位元素：
我一直在尝试使用名为JCE（Joomla内容编辑器）的WYSIWYG编辑器来制作页面，但一直没有运气。它只是拒绝工作，而且变得如此善变！
我尝试插入div然后添加背景图像并使用“绝对定位”将元素放在该图像上，但是我设法得到的最远的是你在主页上看到的，一团糟：
WYSIWYG编辑器已生成此代码：
<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>
不漂亮，所以我问社区......
...你通常如何进行这个过程？它应该是相当标准的程序，但我的搜索没有提供任何实用的建议。
非常感谢任何可能有帮助的教程的建议或链接。
致以最诚挚的问候，
忒。
答案 0 :(得分：1)
editor.css示例：
.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;
}