Looking to align a div in the middle of a parallax background image?

I'm trying to center a div with a parallax background image both horizontally and vertically on the page. I attempted using classes from Bootstrap 4 such as d-block, mx-auto, and text-center. While it centered the div horizontally, it did not center it vertically. How can I achieve vertical centering as well?

.parallax_bg {
  background: url(assets/img/corinne-kutz-211251.jpg);
  background-size: cover;
  height: 100%;
  min-height: 100%;
  overflow: auto;
}

.parallax {
  background-attachment: fixed;
  background-size: cover;
  background-repeat: no-repeat;
}

.parallax_text > p {
  font-size: 20px;
}
<section data-stellar-background-ratio="0.5" class="parallax parallax_bg text-center mx-auto d-block">
  <div class="parallax_text">
    <h3><em>Venenatis Nisl Porta</em></h3>
    <p>Lorem vestibulum gravida ipsum non velit aliquam</p>
    <a class="btn btn-primary mt-3" href="#">Read More&nbsp;<i class="fa fa-angle-double-right" aria-hidden="true"></i></a>
  </div>
</section>

htmltwitter-bootstrapcss

Answer №1

To create a parallax effect, add the CSS property position: relative to the parallax class and then apply the following styles to the parallax_text class:

.parallax_text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Answer №2

If you want to implement flexbox, you can use the following code snippet:

.parallax_bg {
  background: url(https://lorempixel.com/400/400/);
  background-size: cover;
  height: 100%;
  min-height: 100%;
  overflow: auto;
}

.parallax {
  background-attachment: fixed;
  background-size: cover;
  background-repeat: no-repeat;
  height: 120vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.parallax_text {
  background: #fff;
}

.parallax_text>p {
  font-size: 20px;
}
<section data-stellar-background-ratio="0.5" class="parallax parallax_bg text-center mx-auto d-block">
  <div class="parallax_text">
    <h3><em>Venenatis Nisl Porta</em></h3>
    <p>Lorem vestibulum gravida ipsum non velit aliquam</p>
    <a class="btn btn-primary mt-3" href="#">Read More&nbsp;<i class="fa fa-angle-double-right" aria-hidden="true"></i></a>
  </div>
</section>

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

Bootstrap 3: resizing images - why some do and some don't

Using Bootstrap 3, I have encountered an issue with resizing images. Despite both images having the ".img-responsive" class, only the first one is resizing while the second remains the same size. HTML : <div class="container-fluid"> <img src ...

htmlcssimagetwitter-bootstrapresponsive-design

Placing an object to the right side

I'm currently developing an app using React Native and I need to position something on the right side of the screen. <View style={searchDrop}> <TextInput style={textInput} placeholder="Search Coin ...

javascriptcssreact-native

Click to solve the equation

I want to build a basic HTML page with three input variables (A,B,C). After the user inputs these values, they will click "calculate", and JavaScript will execute the following equations: ((A + B)/2) * 3 = X and (C * 2) = Y The results will be displaye ...

javascripthtmlcss

Chrome/IE displaying text indentation issue within nested divs

Encountering issues with nested divs in Chrome and IE, while Firefox works smoothly. The outer div has both text-indent and margin-top styles set. The inner div's display style is block, so the content after it should appear on a new line without any ...

htmlcssfirefoxgoogle-chrometext-indent

The chosen date is not preserved within the select box

I have these specific items: $scope.items = [{"date":"2014-12-26T05:00:00.000Z","display":"6:00"}, {"date":"2014-12-26T05:15:00.000Z","display":"6:15"}, {"date":"2014-12-26T05:30:00.000Z","display":"6:30"}] When I use the following code: <select ...

htmlangularjsangularjs-ng-options

Having difficulty centering an image in HTML?

I've been struggling to get the image (logo) centered on the top bar! I've tried using align-self: center;, display:block;, but nothing seems to work. It feels like I'm missing something here! Click here for the codesandbox link to view the ...

htmlcss

Tips for overlaying text onto a MaterialUI icon

https://i.stack.imgur.com/cFr5Y.pngI am currently working on a project that requires me to overlay a number on top of an icon. Specifically, I am utilizing the MaterialUI ModeComment icon and attempting to display text over it. Despite trying the following ...

htmlcssmaterial-ui

Alignment and placement of rotated text within a table or grid in a vertical position

Struggling to rotate text in an HTML table, I've encountered alignment and text flow issues no matter what. Various CSS combinations of writing-mode and rotate have been attempted but the problem persists. Here is the test table: Code snippet: tab ...

htmlcsshtml-tablerotationcss-grid

Using node.js to submit a form and upload an image

Seeking some assistance as a newcomer to node. I am trying to achieve a task without the use of any other frameworks like Express. Here is the scenario: I have created a form where users can upload photos to a server running on a node. The form contains t ...

javascripthtmlnode.jsparsingpost

The function FormatCurrency is non-existent

I need assistance with converting a textbox value into a currency using the jquery.formatCurrency-1.4.0.js plugin. My JavaScript function is set up like this: $(document).ready(function() { $('.currency').blur(function() { $(&apo ...

javascriptjqueryhtmlajaxformat-currency

Firefox Conditional Comments

Do older versions of Firefox, such as version 3.0, have unique Conditional Comments available for them? ...

htmlcssfirefoxconditional-comments

Is Flash now irrelevant? What makes HTML5 or CSS3 so powerful?

While I may not consider myself a dedicated Flash Activist, it's hard to ignore the fact that despite its flaws, there are some important uses for it on certain websites. However, with all the buzz around HTML5 and CSS3 being the future of the web, ev ...

flashinternet-explorerhtmladobecss

Box-free calendar dash component

Encountering an issue within my application dashboard, here's a direct screenshot: https://i.stack.imgur.com/sEMrM.png The problem is that the Calendar days are extending beyond the borders of the calendar box. To implement this, I simply utilized ...

pythonhtmlcssplotly-dash

Position the spinner in the center of the user's screen

I created my own spinner: '''' #spinner-bg-loading{ position: absolute; left: 50%; top: 25%; width: 80px; height: 80px; margin: -75px 0 0 -75px; border: 16px solid #FFFFFF; border-radius: 50%; border-top: 16px solid #1 ...

javascripthtmlcss

Is there a way to adjust the transparency of an image without affecting any overlaid text while using Bootstrap's carousel feature?

I am currently working with Bootstrap v4 to build a carousel featuring an image with caption text. My goal is to have the image faded while leaving the text unaffected. Despite trying several non-Bootstrap solutions, I have been unsuccessful in achieving t ...

jqueryhtmlcsstwitter-bootstrapcarousel

Tips for inserting an HTML form within a jumbotron using Bootstrap 4.1

I am currently using Twitter-Bootstrap 4.1 to design a website. One of the components I have is a jumbotron that features a background image covering 75% of the screen at the top. Below this, there are text blocks arranged in a specific manner as shown in ...

htmlcsstwitter-bootstrapbootstrap-4

Display an icon at the upper right corner of the container

Is there a way to shift the question mark on hover to the top right corner of the white box instead of the bottom left corner? <div class="panel panel-default"> <div class="panel-heading"> Test </div> <div class="panel-body" ...

htmlcsstwitter-bootstrapfont-awesome

Retrieving the selected value from a <select> element when it changes

Check out the code snippet below: The HTML part is located in component.html: <select id="select" (change)="selectInputUpdate(this.value)"> <option *ngFor="let option of filteredOptions" value="{{option .Id}}" class="select-option">< ...

htmlangular

Switch the display of a div within a ng-template loop using PrimeNg

Working with the PrimeNg picklist, I have encountered a challenge. Here's what's going on: https://i.sstatic.net/7PHe7.png The main focus is on the first row, while the other rows do not have radio buttons (as they are part of incomplete test d ...

htmlangularprimeng

What is the best way to desaturate an image using CSS?

Currently on my website, I have an image displayed as follows: <img src="/Images/content/home.png" alt="" style="float: left;"> I am wondering if there is a CSS property that can be applied to desaturate this image without the need to manually edit ...

jqueryhtmlcssimage