Welcome visitor
* Login
* Register
It is currently September 19th, 2019, 10:13 am
All times are UTC [ DST ]
* Search
View unanswered posts - View active topics

FORUMS » Client Side » HTML



Post new topic Reply to topic  [ 2 posts ] 
Author Message
  background images question
PostPosted: April 11th, 2009, 1:37 am 
User avatar

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
 Profile  
 
  Re: background images question
PostPosted: 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
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 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

Search for:
Jump to:  
cron