Demo of banner effect header full version#

It’s placed at the right of the, and styled appropriately: The PNG image is 45.8% of the width of the full-size version of the image. To determine the correct value, we divide the full image’s height by its width: 926 / 1500 = 0.6193333333īackground: url(mountain-range.jpg) no-repeat Since the background image won’t size it’s containing element by itself, and the PNG image will need to be responsive, we size the using padding-top.

The full version of the image is saved as a JPG, and is applied as the background of the element with CSS. The text of the page (from Xenophon’s Anabasis) is placed below the, in a element: The text of the banner is placed before the PNG in a element: I addressed that problem by making only part of the image - the section that the text will slide behind - a transparent PNG.

The problem with that is two fold: the file size of the PNG will be enormous for a full-width page hero image, and we’d need another copy of the image for the background. In principle, execution of this kind of effect could be achieved by making the front image an alpha-masked 32-bit PNG.

This article details my recreation and explanation of the effect. I recently saw a very interesting visual effect that I can only describe in a series of antonyms: a fixed, scrolling, disappearing banner.

Demo of banner effect header full version#