 |  |  |  |  |  |  |  |
Wht kind of logic has been used here ?
Please support our HTML and CSS advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
 |
•
•
Join Date: Mar 2007
Posts: 72
Reputation: 
Solved Threads: 0
Junior Poster in Training
Hi,
Please visit http://www.iplt20.com/ipl-delhidaredevils.shtml
All the elements on the site are kind of transparent and we can always see the background even if we scroll down.
I am surprised and was wondering how did the developer do this ?
Would appreciate if the community can give their feedback.
Cheers,
Vishal
Please visit http://www.iplt20.com/ipl-delhidaredevils.shtml
All the elements on the site are kind of transparent and we can always see the background even if we scroll down.
I am surprised and was wondering how did the developer do this ?
Would appreciate if the community can give their feedback.
Cheers,
Vishal
•
•
Join Date: Jan 2007
Posts: 276
Reputation:
Solved Threads: 15
Posting Whiz in Training
Hi Vishal. =)
There isn't much of a trick there. The main content of the page is a table with no background. The background image was used on the body (CSS for that below). The 'translucent' effect of the image was made using the image editor itself. Probably a logo, set at 70% opacity on the same background color as the page to be used.
Here's the background image they used:
http://www.iplt20.com/assets/images/bg-dd.jpg
Here is an approximation of the html and css code for it:
As you can see, all the 'trick' is done by manipulating the body's properties in CSS. =)
The first two background properties aren't important, they just refer to the background color and location of the background image to be used. But it works this way: if your background image does not cover the whole part of the page, the background color fills up the rest of the page's background.
The next properties are the trick part.
The CSS is pretty self-explanatory in that setting
The line after that says no-repeat. Which is also obvious. You don't want the background image to 'tile' the page. Other values for background-repeat are repeat-x and repeat-y. Repeat-x means that your background image will tile along the x-axis (horizontally), and repeat-y will tile vertically. Both of which have lots of applications. =)
The last CSS property, setting a background-attachment to a value of fixed means that you don't want the background image to 'scroll' with the page. You want it fixed in the position you specified (using background-position). Or if you didn't specify a position, it will default to top left.
I hope you read through all that hulla-balloo (and I said that the answer was simple)! So I'll leave you with the shorthand code for background properties equivalent to the CSS code above:
There isn't much of a trick there. The main content of the page is a table with no background. The background image was used on the body (CSS for that below). The 'translucent' effect of the image was made using the image editor itself. Probably a logo, set at 70% opacity on the same background color as the page to be used.
Here's the background image they used:
http://www.iplt20.com/assets/images/bg-dd.jpg
Here is an approximation of the html and css code for it:
<html><head><title>MEEP</title>
<style type="text/css">
<!--
body {
background-color: #18335E;
background-image: url('http://www.iplt20.com/assets/images/bg-dd.jpg);
background-position: right;
background-repeat: no-repeat;
background-attachment: fixed;
}
-->
</style></head>
<body>
<table>
<tr><td>Some content</td></tr>
<tr><td>Another row</td></tr>
</table>
</body>
</html>As you can see, all the 'trick' is done by manipulating the body's properties in CSS. =)
The first two background properties aren't important, they just refer to the background color and location of the background image to be used. But it works this way: if your background image does not cover the whole part of the page, the background color fills up the rest of the page's background.
The next properties are the trick part.
The CSS is pretty self-explanatory in that setting
background-position: right means that you're positioning the background-image on the right part of the page. You can change that using a combination of top/bottom and left/right. (For example, you can have background-position: top left; or background-position: bottom right; but certainly not top bottom! (You can also use a center value but I can't instruct you properly in that. Sorry.)The line after that says no-repeat. Which is also obvious. You don't want the background image to 'tile' the page. Other values for background-repeat are repeat-x and repeat-y. Repeat-x means that your background image will tile along the x-axis (horizontally), and repeat-y will tile vertically. Both of which have lots of applications. =)
The last CSS property, setting a background-attachment to a value of fixed means that you don't want the background image to 'scroll' with the page. You want it fixed in the position you specified (using background-position). Or if you didn't specify a position, it will default to top left.
I hope you read through all that hulla-balloo (and I said that the answer was simple)! So I'll leave you with the shorthand code for background properties equivalent to the CSS code above:
HTML and CSS Syntax (Toggle Plain Text)
Last edited by kanaku; Jul 10th, 2009 at 4:07 pm. Reason: tried to make me more understandable... failed horribly too, it would seem. =(
If you know ASP, you can save other daniweb members from idiots like me by helping out in this forum.
Visit this thread if your username starts with one of the following letters: B D F H J L N P R T X Y Z.
Visit this thread if your username starts with one of the following letters: B D F H J L N P R T X Y Z.
|
Similar Threads
- How to share links from my new web.? (Search Engine Optimization)
- Help please (C++)
- Solved (DaniWeb Community Feedback)
- Need Motherboard (Motherboards, CPUs and RAM)
- I tried many appz, but still got nasty malwares :( (Viruses, Spyware and other Nasties)
- Aurora and more (Viruses, Spyware and other Nasties)
- Forum lurkers, introduce yourself ... !! (Community Introductions)
- 98, ME, and XP have problems seeing each other (Networking Hardware Configuration)
Other Threads in the HTML and CSS Forum
- Previous Thread: Div Scroll Bug in IE - How to overcome?
- Next Thread: Drop down Menu
| Thread Tools | Search this Thread |
You need to join our community in order to build your list of favorite forums. You can visit the forum index for a listing of all forums.
Related Forum Features
Latest HTML and CSS Posts
- Today's Posts
- Unanswered Threads
appointments asp background backgroundcolor beta browser bug calendar cart cgi code codeinjection corporateidentity css design development displayimageinsteadofflash dreamweaver emailmarketing epilepsy explorer firefox flash form format google griefers hackers hitcounter hover html ide ie7 ie8 iframe image images internet internetexplorer intranet iphone javascript jpeg layout macbook maps marketshare microsoft mozilla multimedia navigationbars news offshoreoutsourcingcompany opacity opera optimization pnginie6 positioning problem scroll seo shopping studio swf swf. textcolor timecolor titletags url urlseparatedwords visual visualization web webdevelopment webform website windows7
