• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

Ani's Webdev Blog

A learning diary of website development

  • Home
  • Demo
    • Ajax Contact Form
  • WordPress
  • Front-end
  • Backend

[CSS] Simple parallax [Code + Demo]

Modified on: July 4, 2020

This code implements a simple parallax section with only CSS, no Javascript needed. The idea is that an image will be set as the background image of a section with fixed position, so that when people scroll down, the image stays fixed. The section should have a width defined.

There is an overlay layer on the image which we can put a darker color on the image. Text is horizontally and vertically centered, written on top of the overlay layer, so it is visible and not affected by the overlay.

HTML page (with Bootstrap included):

HTML

CSS file:

CSS

The downside of this, as far as I notice, that the background image does not stay fixed on mobile.

Result with HTML and CSS with a valid image:

Filed Under: Featured, Front-end Tagged With: bootstrap, css, html

Recent posts

WordPress: Create custom post type programmatically

[WordPress] Open Images in Posts into Lightboxes On Clicks (Without Plugins)

Mangools Review: A Productive SEO tool for The Affiliates

Reader Interactions

You are here: Home / Featured / [CSS] Simple parallax [Code + Demo]

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

Hello! My name is Anh. I am a front-end developer in Oulu, Finland. Currently, I work with PHP, HTML, CSS, JavaScript and love writing about them. Please feel free to join the discussion!

FOLLOW MY BLOG

Thank you for visiting this website! I hope you find something useful here :). Contact me by email: anh@anhkarppinen.com.