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
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:
<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);[B]
background-position: right;
background-repeat: no-repeat;
background-attachment: fixed;[/B]
}
-->
</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:
body {
background: #18335E url('http://www.iplt20.com/assets/images/bg-dd.jpg') no-repeat fixed right;Hi,
Thank you for the detailed explanation :)
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.