Background images question

Page 1 of 1

[ 2 posts ]

Print view

Previous topic | Next topic

Author

Message

joshsanders

background images question

Posted: April 11th, 2009, 1:37 am

Posts: 34

Hello everyone,

Im lookin how to have a background with 2 images. The first one is a small 10x10px picture that I want to use tiled on the back. In front of that, right on the center of the screen, I would like to have a different bigger picture and in front of that all the content of the website. Now, when the user scrolls down to see all the content none of the pictures should move, only the content.

How can i do that? Or do I need to create the bg image using a graphic editor?

Thank you people.

Top

Web Master

Re: background images question

Posted: April 11th, 2009, 3:44 am

Posts: 117

I'm going to do it the simplest way.

1. The tiled background. CSS:

html, body {    background-image: url(file path);
                background-repeat: repeat;
                height: 100%}

2. The image on the center. I'm gonna use a table for this with fixed position:

<table style="height:100%;width:100%; text-align: center; z-index:1; position: fixed; top: 0px; left: 0px;"><tr><td>
<img src="the bigger image path">
</td></tr></table>

The z-index is to assure the proper display order.
3. The content over the the images. I use a div with absolute position and another div to wrap the content and center it:

<div style="z-index:2; position: absolute; top: 0px; left: 0px;">
<div style="width: 600px; margin: auto;">
(Your content)
</div>
</div>

Top

Page 1 of 1

[ 2 posts ]

FORUMS » Client Side » HTML

You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum