Set the position of a div element to be fixed

I am currently working on a straightforward application that requires implementing a parallax effect.

Here are the methods I have experimented with so far:

- Inserting an image within a div with the class parallax.

- Subsequently, adding an overlay div with Bootstrap class card item-card card-block, containing a headline, image, and text.

.parallax {
    width: 100%;
    height: 250px;
    border-radius: 0;
}

.item-card {
  flex-direction: column;
  box-sizing: border-box;
  display: flex;
  place-content: center flex-start;
  align-items: center;
  margin: -24px 0 0;
  width: 100%;
  padding: 0;
  border-radius: 18px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<div class="container mt-2">
  <div class="parallax">
      <img style="width: 100%" src="https://www.w3schools.com/howto/img_parallax.jpg" />
  </div>
  <div class="card item-card card-block">
       <h1 class="card-title text-center">Some big text here as headline</h1>
      <div class="card-body">
        <img  style="width: 100%" src="https://static.pexels.com/photos/7357/startup-photos.jpg" alt="Photo of sunset">
  </div>
        <h5 class="item-card-title mt-3 mb-3">Sierra Web Development • Owner</h5>
        <p class="card-text">This is a company that builds websites, web apps and e-commerce solutions.</p> 
  </div>
 </div>

I attempted using position:fixed on the parallax div, but it did not produce the desired outcome.

The aim is to have the image div positioned fixed while allowing the subsequent card div to scroll over it.

Converting the provided image into a background image resulted in the entire div being non-responsive.

javascripthtmlcsssassparallax

Answer №1

Give this method a try

.parallax {
    background-image: url("https://www.example.com/parallax.jpg");
    width: 100%;
    height: 250px;
    border-radius: 0;

    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.item-card {
  flex-direction: column;
  box-sizing: border-box;
  display: flex;
  place-content: center flex-start;
  align-items: center;
  margin: -24px 0 0;
  width: 100%;
  padding: 0;
  border-radius: 18px;
}
<link rel="stylesheet" href="https://examplecdn.com/bootstrap.css">
<div class="container mt-2">
  <div class="parallax">
  </div>
  <div class="card item-card card-block">
       <h1 class="card-title text-center">Exciting headline goes here</h1>
      <div class="card-body">
        <img  style="width: 100%" src="https://example.com/image.jpg" alt="Photo of nature">
  </div>
        <h5 class="item-card-title mt-3 mb-3">ABC Web Solutions • Developer</h5>
        <p class="card-text">Creating amazing websites and applications for businesses.</p> 
  </div>
 </div>

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

Determining the height of dynamically rendered child elements in a React application

Looking for a way to dynamically adjust the heights of elements based on other element heights? Struggling with getting references to the "source" objects without ending up in an infinite loop? Here's what I've attempted so far. TimelineData cons ...

javascripthtmlreactjstypescript

Having trouble getting the jQuery AJAX post syntax to work properly

I am trying to send a post json value to another page using AJAX. However, when I include the "json" parameter in my POST request, the JavaScript code stops working. If I remove the "json" parameter, it works fine. I am still learning jQuery so any help ...

javascriptjqueryajaxjson

utilizing an arrow function in the same manner as a traditional function

I am a fan of the new arrow ()=>{} syntax and would love to use it wherever possible. I understand that arrow functions point to the outer this context. Is there a way to modify an arrow function so that "this" points to its inner scope? For example, h ...

javascriptangularjsecmascript-6

What is the method to adjust the margin-left in an input checkbox?

Imagine you have: <div class="home"> <input type="checkbox"/>.... </div> I am trying to add margin-left:3px to the checkbox. This is my CSS code: .home+input[type=checkbox]{ margin-left:3px; } Can anyone assist me with this? ...

htmlcss

The custom functionality implemented for the JQuery validation plugin is malfunctioning

I am having trouble with a custom method I added to the JQuery validation plugin. Despite trying to find solutions on various forums, I still can't resolve the issue. While I do get an error message when leaving the custom phone number field blank, t ...

jqueryhtmlvalidation

Response from the controller upon choosing a value from the selection dropdown

Scenario: In this scenario, there are two tables in consideration: Firm table : ID (string), Firm(string) Firms table: FirmID(string FK), Name(string) The goal is to select a value from the Firm table, pass it to the controller as Firm, and then execut ...

javascriptc#angularjsasp.net-web-api

When utilizing jade.compile for compiling a jade template containing mixins or included partials

I'm currently exploring solutions for this challenge. The issue at hand involves compiling a jade template for an email campaign, but the file I am attempting to compile is a mixin that includes some partials. Here's an example: controllers/us ...

javascriptnode.jsexpresspug

Tips on configuring the path to incorporate Bootstrap CSS, JavaScript, and font files/classes into HTML when the HTML file and Bootstrap files are located in different directories

<!DOCTYPE html> <html> <head> <title>Unique Demo</title> <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" media="screen"> </head> <body> <div class="container"> <form ...

htmlbootstrap-4

The ng-disabled directive is functioning properly, however it is not having any impact on the disabled attribute in

Having an issue with enabling or disabling a button based on the selection of a certain string from a dropdown menu. HTML <select ng-change="checkType()" ng-options="sth in sth for things"></select> <input ng-disabled="{{toggleDisable}}" ...

javascriptangularjs

I'm curious if someone can provide an explanation for `<->` in TypeScript

Just getting started with TypeScript. Can someone explain the meaning of this symbol <->? And, is ProductList actually a function in the code below? export const ProductList: React.FC<-> = ({ displayLoader, hasNextPage, notFound, on ...

javascripttypescript

Deleting an item in Vue.js with the removal feature

After deleting items from my list, they remain visible until I manually refresh the page. How can I fix this issue? List <tbody> <tr v-for="school in schools" v-bind:key="school.id"> <td>{{ school.id }}</td> &l ...

javascriptlaravelvue.js

Converting API data in Angular using rxjs

Hey there, I received this response from an API: { "records":[ { "id":1, "motivazione":"", "autorizzazione":false, } ] } Can anyone help me transform it to loo ...

javascriptangularapirxjs

Clickable PDF Button for Quick Website Access

Is there a way to create a button on an HTML page that remains functional when the page is saved as a PDF? I want the button to link to a webpage so that users can click on it in the PDF and be redirected to the link. ...

htmlpdfbuttonhyperlink

Steps for loading a new page by clicking an input button:

I'm looking for some help with a basic issue I'm having while customizing a WordPress plugin. I want to redirect the user to the thankyou.php page when they click on the place_order button. I tried changing the input value to thankyou.php, but it ...

phphtmlwordpress

Utilize an array value as a parameter for getStaticProps within Next.js

Currently, I am fetching my Youtube playlist using a fetch request and utilizing getStaticProps(). However, I am encountering an issue where my playlist is dependent on the result of an array of objects. export async function getStaticProps(){ const MY_P ...

javascriptreactjsnext.js

What is the process of inserting information into a nuxt-link in nuxt.js?

I am currently facing an issue with passing data into nuxt-link. Whenever I click on the link, nuxt-link returns a 404 error and fails to load the file. However, the other two links that use :href and hardcoding seem to be working fine. <template> ...

javascriptvue.jsvue-componentnuxt.js

Jquery Issue: Safari Leaves Alert Messages Unclosed When Opening Next Alert

I am experiencing an issue in Safari Browser and need some help with the following scenarios (with Example). When I click a button to delete an account, an alert message pops up. This alert window has two actions - "OK" and "Cancel". If I click "OK", it r ...

javascriptjquerysafarimodal-dialog

Localhost file not refreshing

I'm feeling quite frustrated at the moment. It seems like such a simple issue, but I can't seem to figure it out. I have created a basic webpage with a "tree-view" structure. In my readjson.js file, I am reading from a json file located in json/ ...

javascriptjsonvisual-studio-2010localhost

Is it possible to assign a name attribute to the <img> tag in HTML?

Can the "name" attribute be used in an "img" tag in HTML? If you have this knowledge, please do share and thank you in advance. ...

htmlimageattributes

Creating a multi-page form in AngularJS with Tab navigation

Hello, I am currently working on implementing a multi-stage form using AngularJS Tabs. Instead of using routes in this application, I am trying to achieve the desired functionality solely through tabs. app.controller('createProjectController', [ ...

javascriptangularjstabsangularjs-resource