Forum Moderators: not2easy

Message Too Old, No Replies

Text over image

         

DannyGuitar

2:05 pm on Apr 30, 2007 (gmt 0)

10+ Year Member



A quick look here will probably explain it quicker than I can in words:
<snip>

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]

Setek

3:45 am on May 1, 2007 (gmt 0)

10+ Year Member



Hmm… I don’t know what your structure looks like, since I can’t see your website (you’re not allowed to post URIs like that, please see the Webmaster World Terms of Service [webmasterworld.com] and the CSS Forum Charter [webmasterworld.com].)

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; }