| |
Working With TransparenciesOn this page, we look at how to use transparencies on your page. The first example is reasonably straighforward, and is suitable for those that use Block Builder, as well as uploaders. the second example is a bit more complex. But the results might just be worth it, as you will be achieving something that very few people can do, and it will add a lot of impact to your page. A simple fixed background imageOnthis page you can see a faded rose in behind the text.Note that the image stays in a fixed position, and only the page content scrolls. That is what we are going to do, create a background image that is fixed in behind our content. Our first job is to create the image that we want to use. You can make up your own, or just grab my one to practice with. Here is the URL for the image. Get the image Next task is to write the css class for placing the image. (store the image in a folder called images)Here is what I've used.
Pretty simple code as you can see. Finally, we need to call this background onto the page. So a div tag with the class is above my main H1 heading, and the closing div is at the end of the column. How easy is that? I've seen some very complex ways to place a background image, but this one is simple, easy, and works. Upload the image to your Graphics library, and everything should work. With block builder, you will want to place the css code directly onto the page instead of a stylesheet. So just use the code below, and put it straight into any text block.
A New Way To Work With TransparenciesOkay folks, this one is a bit complex. So think about whether you want to spend the time getting it to work right. Take a look at this page to see the effect. I suggest keeping this page open while you follow the instructions below. Also look at the source code so you can see how it has been done.See how the page has been created? There is a purple background image, that will repeat vertically. On top of that is a centered area that is transparent. This allows the background to show thru. And on top of that, is the text which is NOT transparent. It took a lot of work and experimenting to get this working correctly, but I think the results are worth it. Lets take a look at the css need to get this thing working.
Yes, that's quite a lot of code. But don't worry about that for now, just copy it in the meantime. If putting into an external stylesheet, you would of course remove the style tags. I woulsd suggest using my background image for now, and creating your own later. Get the background image. Now create a new page - we are going to add the effect to the main content column. This looks great with a single column page, but you can do it on any style you like. If you're using the fixed width template, then its easy to set the side columns to something like 1% width, so they are more or less non existant. Or if you prefer, you can remove them entirely, and set the header to colspan="3" (also the footer) so you have a single column page. It's up to you. Here's the code at the start of where you want the effect to begin.
There are a lot of vairiable that you can play with. For instance, try varying the transparency for a different look to the page. You will need to change all of them, as there is different css for different browsers. Also, if you intend to use this on more than one page, you may wish to remove the hight for the image class, and put it onto the page instead. I have it here, because I know I want my page to be 1000px high. But if you are reusing the code, you will want to set it to the individual page heights (you wont know what they are until the page is complete. So take your best guess, and adjust when your finished the page. That is one good reason for using a fixed width template with this technique).
Hope you have fun with this!
| |
|
|
|
|
Copyright© SBI-Help 2007-2009
|
|