Register    Login    Forum    Search    FAQ

Board index » Programming Heaven » CSS

It is currently Mon Feb 06, 2012 6:27 am
All times are UTC
View unanswered posts | View active topics
 



Post new topic Reply to topic  Page 1 of 1
  [ 2 posts ] 

Transparent Scrolling Foreground

Author Message
john
 Post subject: Transparent Scrolling Foreground
 Post Posted: Sun Jul 26, 2009 10:51 am 
Offline

Joined: Wed Jul 22, 2009 12:30 pm
Posts: 26
http://www.paul-wallas.co.uk/

The background image effect was achieved by adding: "background:url(images/bg.jpg) top center fixed no-repeat;" to his css. The "fixed" position indicates that the background is static.

The content boxes simply have a transparent background on them along with what seems to be another layer on top that was probably filled-black and had it's opacity lowered (these two layers are part of the image... no css was used). It was then saved as .png which uses alpha transparency to make it look all shiny, but unfortunately isn't really supported by ie that well - ie7 is alright at it, but ie6 sucks.
Top 
 Profile  
 
john
 Post subject: Re: Transparent Scrolling Foreground
 Post Posted: Sun Jul 26, 2009 7:08 pm 
Offline

Joined: Wed Jul 22, 2009 12:30 pm
Posts: 26
nother solution. Not by CSS but by using javascripting. When used, it places an image in your background. And no matter the size of your windoe, it will fill it up.

First create a file like "fixedbackground.js" by using notepad or any other editor. This file should contain:


Code:
    var backgroundset               = false;
    function fixedBackground(url) {
       if(!backgroundset) {
          document.body.style.overflow      = 'hidden';
          document.body.style.padding      = '0px';
          document.body.style.margin      = '0px';
          var overlay         = document.createElement('DIV');
          overlay.style.position         = 'absolute';
          overlay.style.top         = '0px';
          overlay.style.left         = '0px';
          overlay.style.height         = '100%';
          overlay.style.width         = '100%';
          overlay.style.overflow      = 'auto';
          overlay.innerHTML         = document.body.innerHTML;
          document.body.innerHTML      = '<img id="background" height="100%" width="100%" src="' + url + '" style="left: 0; bottom: 0; right: 0; top: 0; z-index: 0">';
          document.body.appendChild(overlay);
          backgroundset         = true;
          }
       else background.src            = url;



Next, in the head section of your htm-file (or asp, or php, or whatever), place the followoing code:


Code:
    <script src="fixedbackground.js"></script>





In your htm-file (or whatever), your body-tag should contain an onload like:


Code:
    onload="fixedBackground('background.JPG');               (any other image-file will do)





That's it.

If you are using frames, you have to do this for every document in that frame. That's a lot of work because you have to cut up your image in images for every frame you use.
If you change to iframes, then it is a lot easier. Every line for a iframe should contain "allowtransparency" like:


Code:
    <iframe allowtransparency with="XX(%)" height="XX(%)" src="XXXX.XXX" name="XXXX" border="X" frameborder="X"></iframe>





Every document loaded in the iframe needs some extra coding to. In the head-section you need:


Code:
    <style>
    body{
       background-color: transparent;
       }
    </style>





Don't assign any background in you body-section!


If you wan't to see an example, visit http://publiek.serverthuis.nl. Play around with the window and see the effect.
Top 
 Profile  
 
Display posts from previous:  Sort by  
 
Post new topic Reply to topic  Page 1 of 1
  [ 2 posts ] 

Board index » Programming Heaven » CSS

It is currently Mon Feb 06, 2012 6:27 am
All times are UTC
View unanswered posts | View active topics
 

Who is online

Users browsing this forum: No registered users and 1 guest

 
 

 
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

Search for:
Jump to:  
Your Ad Here
cron