Web 2.0 Style two Side Background, Dark to Light Effect
This is a demo page. We use two divs and two background images for left and right. And we use background-position attribute of css especially to align the right background to right of page. Dont forget to tell browser how bg should repeatet. Even if the page is resized, we have the same effect on the display. Demo and More
Left background image:
Right background image:
HTML code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Web 2.0 Style two Side Background, Dark to Light Effect</title>
<style type="text/css">
*, body, div { top: 0; left: 0; margin: 0; padding:0; }
</style>
</head>
<body>
<div style="background: url(background_effect_left.png) repeat-y; background-position: left;">
<div style="background: url(background_effect_right.png) repeat-y; background-position: right;">
<div style="padding: 0 200px;"><br /><br />
<h1>Web 2.0 Style two Side Background, Dark to Light Effect</h1>
<br /><br />
<p>
This is a demo page. We use two divs and two background images for left and right. And we use background-position attribute of css especially to align the right background to right of page. Dont forget to tell browser how bg should repeatet. Even if the page is resized, we have the same effect on the display.
<br /><br />
Left Image:
<img src="background_effect_left.png" style="border: 1px dotted red;" />
<br /><br />
Right Image:
<img src="background_effect_right.png" style="border: 1px dotted red;" />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
</p>
</div>
</div>
</body>
</html>
Bookmark/Search this post with
| Attachment | Size |
|---|---|
| Download this example (HTML Page and both Background Images) | 37.7 KB |
Similar entries
- Mouseover images with CSS
- Web2 Style CSS Dynamic Menu with Arrows and Background-Images
- Pure CSS Mouseover Menu without Javascript
- DropDown / Rollover Menu with pure CSS / HTML
- Common HTML / Web colors
- Preload images with JavaScript or CSS
- Change background color onmouseover with Javascript
- Web2 style secure & flexible free php contact form with easy setup
- Cool Drupal Themes with preview to download directly
- Free Banners : 468 x 60
- Remove underline from text-links (html-tag a)
- CSS hierarchy and inline style sheets
- Multiple 2+ Divs next to each other (like table cell)
- Photo Album / Picture Gallery Script with PHP
- Image watermark with PHP
- Basic HTML Table with rounded corners
- HTML horizontal list elements instead vertical
- A HTML-Example Page
- Drupal problem with inline style <p style=""> and <br />
Comments
good example but I need light
good example but I need light to dark and top to bottom
Post new comment