Fixed Backgrounds With CSS

The parallax effect is setting trend's in the industry. Parallax is a displacement or difference in the apparent position of an object when viewed from different positions.

The use of Parallax is not new to human civilization, we have been using Parallax to measure distances between objects in Solar System and distant objects. In 21st Century we have implemented the same technique to satisfy our users need for happiness and fun. Parallax effects does enhance the usability and lets the user feel the movement, but it can be a little awkward in times.

Let's have a look at functions CSS3 has packed in for Parallax kind effects.

HTML

There isn't a big deal with HTML, its as usual as you mockup your page. For the purpose of this demo, I have made a simple mockup with a few container that size up to the screen size and are lined one below the other to facilitate the scrolling and a few added tricks to Center Objects in the div.

<div class="container-box bg-1 fix-bg">
	<div class="content-container">
		<div class="container-wrap">
			<div class="playground">
				<h1 class="main-title">Idukki</h1>
				<h3>Kerala, India</h3>
			</div>
		</div>
	</div>	
</div>

CSS

This is where the magic happens, we are using the css background-attachment property to get this work, background attachment can have the following properties scroll or fixed or local.

• scroll : The background scrolls along with the element. Default
• fixed : The background is fixed with regard to the view-port, ( This experiment)
• Local : The background scrolls along with the content of that element.

background-attachment can inherit parents property or can be set to its initial using initial or inherit .

.fix-bg{
	background-attachment: fixed;
}

That's it! Few lines of CSS to tailor a wonderful parallax like effect.