CSS - A Window on a Landscape

Without the need to use JavaScript, we see through a window a landscape or an image that remains fixed as and external view, while the page is scrolled.

The demonstration

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:

  1. A big picture that is the landscape seen through the window.
  2. An image used as a mask to make the window.
  3. Two embedded <div> tag.
  4. The descriptor for each CSS tags.

The picture of the landscape.

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 images can be downloaded to be viewed with a paint program. They are respectively image1.gif, image2.gif et image3.gif. The third is the one used abover.

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. 

<div class="back">
    <div class="fore></div>
</div>

The CSS

The stylesheet defines a descriptor for the fore and back tag: 

.back
{
	background: url(images/sea.jpg) no-repeat fixed 0px 0px;
	width:240px;
	height:240px;
}

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. 

.fore
{ 
	background:transparent url(images/image3.gif) no-repeat 0px 0px;
	width:240px; 
	height:240px;
}

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.

Compliance

This effect has been tested with all browsers.

© 2008-2022 Xul.fr