How to achieve a parallax scrolling effect with CSS?

Parallax scrolling is a web site trend where the background content (i.e. an image) is moved at a different speed than the foreground content while scrolling. This effect certainly makes the page more interesting and beautiful.

Below is a basic example of how to achieve this effect using pure CSS:

HTML:
```

Lorem ipsum …

```

CSS:
```
.parallax { /* The image used */ background-image: url(“image.jpg”);

/* Set a specific height */ min-height: 500px; /* Create the parallax scrolling effect */ background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; }

.content { padding: 50px;
}
```

This code works by using the ‘background-attachment: fixed’ property, which sets the background image to not scroll with the page – giving the illusion that it’s in the background. As a result, when the page scrolls, it appears that the image is moving at a different speed than the rest of the page, thus creating a parallax effect.

Note: This is a basic and pure CSS method to create parallax scrolling effect and is not considered the best approach for a full-fledge parallax website. Using JavaScript we can control how different layers of web page content scroll at different speeds which give us more control over the desired effect and is more performant.