developmentgasil.blogg.se - Css parallax background image

Css parallax background image how to#
Css parallax background image for mac#
Css parallax background image full#
Css parallax background image code#

The content will appear scaled as normal to the user but tricks the browser into thinking the content below the. This is just to clean up the display: html, body Let's set up the html and body selectors.įirst, we're removing all padding and margin spacing around the edge of our document. Now, we'll step through each of the elements and their CSS rules and definitions. content-inner containers hold the page content that exists below the background image and page title.

parallax container is the element where the background image will be stored using a pseudo-selector, and also where the page title will be displayed.

Css parallax background image code#

The below code example represents the markup needed for the background image, page title, and surrounding content: This is a Parallax Scroll Example Paragraph 1 Paragraph 2 Paragraph 3 Paragraph 4 Paragraph 5 The result will be a smooth scroll with the background image scrolling at half the speed of its surrounding content: In this case, the illusion is accomplished by defining a set of 3D perspective and layer transformation CSS rules that will be output in a 2D format on the screen. Parallax scrolling is a technique used to make background images appear as if they're moving slower than their surrounding foreground elements when scrolling through a web page. We'll go over that in a bit.įor now, let's get started with a quick explanation of what this is and how it can be used within a website.

Css parallax background image for mac#

Safari for Mac and Chrome and Safari for iOS have a minor caveat that you can simply workaround using a few CSS tricks.

Css parallax background image how to#

Thank you for reading my blog.This article will teach you how to create a parallax scroll effect with pure CSS that works in all modern desktop and mobile browsers, including the latest versions of Chrome, Firefox, Edge, Opera, Safari, Chrome for Android, and Chrome and Safari for Mac. Thank you for reading, and let's connect! See the Pen Tailwind CSS parallax effect by Chris Bongers ( CodePen.

Css parallax background image full#

You can find this full demo in this Codepen. The whole text block also uses the same classes as the header block. Parallax inline Īs you can see, all the other classes are the same. With this, we also need to add m-auto, which will center it horizontally. That is almost the same setup, except in this case, we add a container class to make it not 100% wide. That's all cool and well, but now you want a parallax effect for the header and between two text areas. That's it! We now have our CSS parallax effect with a background image, which is always 100% of the viewport height.

rounder-xl: Adds the nice rounder borders.

bg-opacity-50: This ensures the background has an opacity of 50%.

bg-purple-300: A nice cool purple color.

text-2xl: Makes the text nice and big (1.5rem).

p-5: Adds equal padding on each side (1.25rem).

Then for our overlay box, we use the following:

custom-img: Custom class to add our background image.

bg-cover: Makes sure the background is covering the whole header element.

bg-center: This makes sure the background is centered.

The background-fixed makes sure the background stays where it's set.

bg-fixed: This is the magic that makes the parallax effect.

mb-12: We add quite a big margin-bottom with this (3rem).

h-screen: This adds a 100vh height, so it's 100% of the viewport.

justify-center: Aligns the text-block horizontally.

items-center: Aligns the text-block vertically.

flex: Adds a display flex so we can align the text block inside.

I'll post the full class list and guide you through each class and what it's used for. Now we want to make this header full height with a background image that will cover the area. The div will hold some text to show the parallax effect better. We'll be using the header tag with a div inside. We'll start by creating the header using Tailwind classes. You can see the result in the following GIF: In this Tailwind example, we will be using it for the header and an inline section. The main idea is that a background image stays at a fixed position while you scroll over it. I've made a full CSS parallax effect before I've you are interested in seeing how it works. The rest will be built using Tailwind classes. The only custom CSS we need is for a background image. Today we'll be creating a super cool parallax effect using only Tailwind CSS. Learn how to create a parallax effect with a background image using only Tailwind CSS.