Fixed Backgrounds With CSS

Fixed Backgrounds With CSS

Advert

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.

Demo Github Download

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.

Demo Github Download

Comments

Wow ! you have someting to tell us. That's great! Please keep in mind that comments are moderated, we employ rel="nofollow" for links, avoid using a spammy word or a domain in name field, it might end up as a Spam. Thanks for reading.

Last 5 Articles

All Articles >

  1. 9 Ways to Boost the Design of Your Sports Team Website

     
  2. DevOps Tools

     
  3. The Best Marketing Apps to Use with Shopify

     
  4. Tips to Increase Software Development Speed

     
  5. Mitigating Risks In Custom Software Development

     

News Letter

Subscribe to our email newsletter for useful tips and valuable resources, sent out every new article release.