Steps to crafting an image with a white box overlapping

Currently, I'm working on designing a white text box that includes both a title and content. My navbar and background image are already set up, so the next step is creating this new container. Is there anyone out there who could provide some guidance or assistance?

Appreciate it! 1

Here's the sample HTML code:


<div class="container-fluid bgImage">
  <div class="container">
    <div class="row justify-content-center">
        <h1
          class="text-bottom text-center text-white"
          style="font-family: 'Oswald', sans-serif; font-size: 40px;">
          Realize o seu plano Canadá conosco!
        </h1>
    </div>
  </div>
</div>

CSS details are provided as follows:


.bgImage {
  background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)),
    url(https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.pexels.com%2Fsearch%2Fnice%2F&psig=AOvVaw2j1DWCKF-BDyEOl8dckied&ust=1585611293317000&source=images&cd=vfe&ved=0CAIQjRxqFwoTCKjVssbswOgCFQAAAAAdAAAAABAD) center center / cover;
    height: 100vh;
    display: flex;
    display: center;
}
htmlcssangular

Answer №1

To accomplish the desired outcome, you can integrate the following CSS code into the text-bottom selector.

.text-bottom {
  background-color: #fff;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 80%;
  width: 50%;
  text-align: center;
  padding: 30px;
}

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

Why is it that a label tag cannot be placed directly above an input tag?

On this particular page: http://getbootstrap.com/components/#input-groups-buttons If you modify the Go! button to a label (using Chrome inspector), you will observe that the Go! button is no longer positioned on top of the input field: https://i.sstatic ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Adjust the dimensions of the embedded Google document

Currently, I am in the process of developing a website for my initial client and I'm encountering some difficulty in adjusting the size and background color of an embedded google doc. If anyone could provide assistance, it would be greatly appreciated ...

htmlcss

Using REST API and AngularJS to sign in to asp.net

After successfully implementing a login page in ASP.NET with AngularJS and REST API integration, I am now looking to add an auto-generated token for added security measures. How can I achieve this login operation in ASP.NET using AngularJS and REST API? ...

javascriptjqueryhtmlcssangularjs

Toggle class to a div upon clicking menu item

Seeking assistance with jQuery to develop a video player featuring a sub menu for displaying various content options upon selection. Here is a snapshot of the frontend design: view image Upon clicking on 'video' or 'audio', a distinct ...

javascriptjqueryhtmlcss

There was an issue with the program: "ERROR TypeError: When trying to call a method from the

Hey everyone, I'm attempting to retrieve data from an API using a specific service and then log the data in the console. However, I'm encountering an error with the component and service I'm using that reads: ERROR TypeError: Cannot read pro ...

angular

Struggling to retrieve XML data in PHP using SimpleXML. Here is my current code snippet

I'm having trouble getting this code to work, and I can't seem to figure out why... Take a look at my XML: <customer> <name>Cadence</name> <city>Lake Katrine</city> <state>NY</state> <zip ...

phphtmlxml

Expanding Images in Bootstrap 4 Carousel

I am encountering some difficulties with a basic carousel implemented using Bootstrap 4. The carousel contains 3 images with the class d-block w-100, which is supposed to make the images stretch to the full width of the screen. However, in my case, the ima ...

htmlcssbootstrap-4carousel

What is the best way to adjust the font size in CSS/JS so that it creates a specific margin on the sides of its container?

Is it possible to create a font size that is perfectly scaled to fit within a specific container? For example, I would like the text to have 8% margin on each side of the container, and fill the remaining 84%. How can this be achieved using HTML/JS/CSS? ...

javascripthtmlcssfonts

Enhance parent style when child's data-state or aria-checked attributes are updated in React using Styled Components

Within a label, there is a button embedded as shown below: <MyLabel htmlFor='xx' onClick={() => onChange}> <MyButton id='xx' {...rest} /> Check it! </MyLabel> In the Developer Tools Elements section, the st ...

javascripthtmlcssreactjsstyled-components

Navigating pages in tinymce editor

Currently, I have implemented TinyMCE as the editor for my PHP-based website. However, I am facing a challenge in integrating pagination within the editor. My goal is to allow users to input long content that will be displayed across multiple pages inste ...

phpjqueryhtmlcsstinymce

retain focus even after using .blur()

Currently, I am implementing a form submission using AJAX. The form consists of only one input field and the submit button is hidden. My aim is to ensure that when the user hits the enter key, the input field does not lose its focus. Here's the code s ...

javascripthtmlajaxforms

consistent height across the div when expanding

There is a recurring issue I encounter where it takes too long for me to solve the problem. My goal is to ensure that the bootstrap boxes at the bottom of the page have the same height. I attempted to set a fixed height in pixels using my CSS, but this cau ...

htmlcsstwitter-bootstrap

Notifying the chosen option using jQuery

I have been attempting to display an alert on the webpage based on the selected option. Unfortunately, it appears that my code is not functioning properly. This is what I have tried: $(document).ready(function(){ $("select.country").change(functio ...

javascriptjqueryhtmldrop-down-menu

Embrace the D3js Force Layout barrier and dive right in

Currently, I am working on a force layout project. My main objective is to enable the nodes to avoid a particular div element placed in the center without utilizing gravity within the SVG. I have already implemented collision detection and bounding within ...

javascriptcssd3.jssvg

Enhance your website's accessibility by using JavaScript to allow the down and up arrow keys to function

Thank you for taking the time to read this, any feedback is greatly appreciated. The current script on my website is only partially functional (click "i" in the bottom right corner). Currently, the script will focus on the first link AFTER pressing the T ...

javascriptjqueryhtmlaccessibility

Having difficulty submitting a form with ajax, while accomplishing the same task effortlessly without ajax

I have been experimenting with submitting a form using ajax to the same .php file. When I submit the form without ajax directly (form action), the database gets updated. However, when I try the same process with ajax, there is no change in the database. H ...

javascriptphphtmlcssajax

On a desktop view, the content is displayed in 4 columns, while on smaller

In my simple block, I am trying to arrange 4 items in a row on desktop and 2 items per row on smaller devices like tablets and mobile. The desired layout is shown below: https://i.sstatic.net/3i799.png To see a live demo, visit: jsfiddle Below is the HTM ...

htmlcssbootstrap-4flexboxbootstrap-5

Arrow indicating the correct direction to expand or collapse all items with a single click

I have successfully implemented the "expand/collapse all" function, but I am facing an issue with the arrow direction. The arrows are not pointing in the correct direction as desired. Since I am unsure how to fix this problem, I have left it empty in my co ...

javascriptjqueryhtmltoggleexpander

Attempting to retrieve information from two separate databases using PHP

For a school project, I am developing a booking system and encountered a problem that I am unable to solve on my own. Your assistance in resolving this issue would be greatly appreciated :) Below is the PHP code used to retrieve data from the database (fo ...

phphtmlmysqlsqldatabase

Error in Angular 11: Unspecified parameter in the URL

I've been working on passing a URL parameter received from a GET request to the Contracts component. However, when visiting the Contracts component in the URL, the passed parameter appears as undefined. Here's what I have tried so far: In my app ...

angularurl