CSS - A Window on a Landscape
Scroll the page. If necessary, reduce the window of the browser to display a vertical and horizontal scrolling button.
How to achieve this effect
For this purpose, we use:
- A big picture that is the landscape seen through the window.
- An image used as a mask to make the window.
- Two embedded <div> tag.
- The descriptor for each CSS tags.
Designing the mask
This is done in three steps with a painting software capable of creating an image with a tranparent background and having predefined shapes. In the current case we have used The Gimp and Paint.net.
It is assumed that the page is blank, so the mask will be filled in white with a transparent hole.
|Creatz an image with a transparent background
|Add a white circle
|Fill in blank the outer of the circle
The div tags
The fore tag will be used to display the mask and the back tag which contains it, has the landscape as background.
The stylesheet defines a descriptor for the fore and back tag:
background: url(images/sea.jpg) no-repeat fixed 0px 0px;
The background property has as attributes the url of the photo of the landscape, the essential fixed attribute so the image does not scroll when you scroll the page and the positions of the image inside the back tag.
background:transparent url(images/image3.gif) no-repeat 0px 0px;
The background property of fore has as attributes the url of the mask, the transparent attribute to take into account the transparency of the image, and the positions of the mask in the fore tag.
This effect has been tested with all browsers.