How are these background images able to remain in a fixed position like this?

Trying to name this question correctly was a bit tricky. Hopefully I got it right.

I have a new client and they want their website to have a similar feel to .

If you check out the index page and scroll down, there's this cool 'smooth animation' where blocks slide up into the background image.

Here's what I mean: http://gyazo.com/8cafbab233930bd478723b48c5912263

So my question is, how do I achieve this effect? Is it just an image with text on top, or is it a background image? What rules do I need in place to make this happen?

Answer №1

You have the ability to achieve this using CSS as demonstrated below.

body{
  margin:0;
  padding:0;
}
.one{
  background-image:url('https://placekitten.com/g/1200/800');
  height:500px;
  background-size:cover;
  background-position:static;
   position: static;
    background-position: inherit;
    background-attachment: fixed;
  }
   
.two{
   height:500px;
  }
<div class="one"></div>
<div class="two">
  <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vehicula sem mi, at faucibus ex consequat eu. Suspendisse bibendum nulla id nisl pulvinar, a lacinia nisi imperdiet. Nam eget mi congue, lacinia augue dictum, ullamcorper ex. Donec condimentum dolor nisl, eu tincidunt lacus congue et. Duis eu libero id nunc facilisis viverra a id velit. Suspendisse potenti. Fusce in nisi eu est consectetur fringilla vitae non nunc. Cras neque elit, pharetra at ipsum at, semper laoreet eros. Nunc eu dolor blandit, varius felis vel, congue turpis. Vestibulum ullamcorper leo odio, in mattis ante pretium nec. Ut sagittis luctus lacinia. Donec vehicula ullamcorper lectus, eget pretium nisi laoreet id. Cras id laoreet nunc, ac molestie lectus. Phasellus suscipit, risus eget fringilla posuere, urna eros venenatis ante, vel finibus lorem arcu a massa. Etiam at ante massa.
</p>
  <p>
Ut tempor fermentum dui sed placerat. In commodo velit at augue luctus bibendum. Aliquam ullamcorper tincidunt posuere. Sed congue sagittis est ac viverra. Cras eget lobortis leo. Donec rutrum elit purus, et sollicitudin lacus pulvinar eu. Maecenas sit amet metus nisi. Proin porta diam et rhoncus mollis. Quisque arcu leo, sagittis a iaculis gravida, pulvinar ac risus. Etiam lacinia urna nunc, eu tincidunt massa finibus id. Aliquam posuere, est at mollis rhoncus, libero neque varius dui, vel facilisis odio dolor non ante. Nullam tempor ligula non pellentesque aliquet. Donec rutrum est ac nisi tempus dapibus. Sed vel est eget nisi bibendum dapibus. In consectetur leo volutpat, pharetra dui in, consequat magna.
    </p>
...
</div>

Answer №2

To ensure your background image stays in position, you should utilize the 'background-attachment' property as shown below:

selector { 
    background-image: url(image.extension);
    background-attachment: fixed;
}

You have the flexibility to overlay any content on top of the background image. As you scroll, the background will stay fixed in its place while the content moves accordingly.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Checkboxes display on a separate line when rendered inlines

I'm having an issue with the rendering of my checkbox in CSS. The checkbox is currently displaying on a separate line from the text, but I would like it to be inline with the rest of the content. For reference, here is the full CSS and HTML code: htt ...

What is the best way to distribute components with varying cell heights?

I am currently working on creating a user interface layout with components that need to be arranged in a specific order, as depicted in the accompanying image. My task involves developing a Material UI Dialog within a React application based on the design ...

Refresh the content with an embedded iframe

I am attempting to update the body content by removing all existing content and inserting an iframe: function create_custom_iframe(target){ var iframe = document.createElement('iframe'); iframe.setAttribute('id', 'target_u ...

Choose only the options that are present in both arrays

I am working on creating a multiple select feature that displays all nodes, but only checks the ones that are present in 2 arrays. My front end is developed using Angular 8 and TypeScript. private mountSelect(nodesInRelation, lineApiKey) { console.lo ...

I am encountering difficulties displaying the image and CSS files from another folder in my HTML with Node.js

I am facing difficulty in establishing a connection between my front-end and back-end using node.js. As a result, the website only displays the HTML code without linking to the CSS or image files. Here is the folder structure: root -src •pi ...

Having trouble with the input range slider on Chrome? No worries, it's working perfectly fine

I'm currently facing an issue with an input range slider that controls the position of an audio track. It seems to work perfectly in Firefox, but in Chrome, the slider gets stuck and doesn't move when dragged. There is a function in place that up ...

Not all properties are affected by the CSS stylesheet

Even though my CSS stylesheet successfully changes the background color of the page, I am facing issues with other properties that I have set on my HTML tags. {% block body %} <div id='title'> <h1> VISUALIZER2D ...

Separate the text content stored in the database into individual paragraphs

I have a piece of text saved in my database : model.Description : "Bacon ipsum dolor sit amet fatback pork belly swine cow drumstick jowl" In my view, I would like to split the text like so: <p> Bacon ipsum dolor </p> <p> sit ...

Displaying information stored in a database as notifications in the notification icon within the HTML/PHP header

Within my MySQL database, there exists a table named order_detail. This table is populated with values from my android app. I am looking to display the order_id as a notification in my admin panel, which is built using HTML/PHP. The attributes of the orde ...

Slide your cursor over to reveal a picture

I'm looking to create an interactive image gallery where the user can hover over an image to reveal text below it. I've been trying to achieve this by setting up my images in a specific way: echo "<div class=textimage style=background-image:u ...

Customizing the appearance of a submenu header on a WordPress website

I need assistance in creating a sub-menu style. Please refer to the image linked below for guidance: Here is my website link: ...

Revamp every single hyperlink that ends in .html

I am looking to customize the URLs on my website to appear like this: www.example.html/1 www.example.html/2 www.example.html/3 instead of their current format: www.example.html/1.html www.example.html/2.html www.example.html/3.html Can anyone provide a ...

Remove interactive data tables from the onclick event

I have a dynamically rendered DataTable from https://datatables.net. I implemented an on-click event for the rows based on this tutorial: https://datatables.net/examples/advanced_init/events_live.html In the row, there is a select box that I excluded by ...

Opening the Instagram app in Instagram's built-in browser

<a href="instagram://user?username=someuser">Open Instagram</a> Works fine on Google Chrome on my Android phone. However, it does not work from Instagram's in-app browser. I keep getting a 'Page can't be loaded' error messa ...

The functionality of @Output and custom events appears to be malfunctioning

I am a beginner in Angular and attempting to pass data between child and parent components. In the child component.ts file: @Output() doubleClick = new EventEmitter<string>(); onDoubleClick(nameAccount: string){ this.doubleClick.emit(nameAccoun ...

Tally up the values of selected checkboxes

  I'm in search of a method to tally up data-values associated with checkboxes. In the example provided below, selecting locations from the checkboxes results in the calculation of primary values, which are displayed in the green box. I also need to ...

Manipulate component properties using CSS hover in React with Material-UI

I am attempting to modify the noWrap property of a Typography element when hovering over it. I have defined a custom CSS class for the parent element and the hover functionality is working correctly. However, I am unsure how to adjust the noWrap property u ...

Customizing the Slider Range with HTML DOM Style's BackgroundImage Attribute

I have a slider range that I'd like to modify using JavaScript. Specifically, I want to change its background-image property. To achieve this, I attempted the following script: document.getElementById("range").style.backgroundImage = "linear-gradient ...

AngularJS: Creating a unique directive for verifying the availability of a username - no duplicates allowed

I have a registration form that includes a username textbox. I would like to implement a custom directive that will check if the entered username already exists in the database. Here is the api implementation: /*get the unique username*/ $app->get(&ap ...

Does the Width Toggle Animation fail to function in FireFox when using jQuery?

Has anyone else encountered this issue with the jQuery animate function not working in Firefox but working fine in IE8, Opera, and Chrome? I'm experiencing this problem and wondering if there's a workaround to make it work in Firefox as well. ht ...