Forum Moderators: not2easy
I'm trying to create a background image that fills the viewport and put text over it. Kind of like how FireFox's website does:
[FireFox.com...]
On my site, it's 2 images. One is just a repeated gradient to fill the viewport. The other is the actual image with the smiley face and computer centered over it. It's supposed to appear as a single image though.
Anyway, can someone help me get the text to appear over them?
Thanks.
[edited by: Robin_reala at 9:40 pm (utc) on April 30, 2007]
[edit reason] Removed URLs as per TOS #13 [webmasterworld.com] [/edit]
However, by the sounds of things it seems quite simple, so I’m going to just go ahead and whip something up.
HTML:
<body>
<div id="smiley">
<p>This is my text.</p>
</div>
</body> CSS:
body { background: url('/images/repeating-bg.jpg') repeat-x; }
div#smiley { background: url('/images/smiley.jpg') no-repeat 0 0; }