The box seems to be refusing to center properly, and as if that's not enough, it's dragging the background

How can I center the black box on my webpage without it moving up and down when adjusting padding or causing the background image to scroll? I'm getting confused with all these adjustments, can someone please help me understand what's going on?

    #banner_image{
    background: url(../Images/intro-bg_1.jpg) no-repeat center center;
    padding-top: 10%;
    padding-bottom: 25%;
    text-align: center;
    color: #f8f8f8;
    background-size: cover;
}

    #banner_content{
    background-color: rgba(0, 0, 0, .7);
    max-width: 660px;
    position: relative;
    padding-top: 6%;
    padding-bottom: 6%;
    margin-top: 6%;
    margin-bottom: 6%;
    margin-left: auto;
    margin-right: auto;
}
   <div id="banner_image">
            <div class="container">
                <div id="banner_content">
                    
                </div>
            </div>
        
        </div>

htmlcssbootstrap-4

Answer №1

<style>
    #banner_image{
    background: url(./bg.jpg) no-repeat center center;
    /* Adjust the values as needed */
    width: 100vw;
    height: 100vh;
    text-align: center;
    color: #f8f8f8;
    background-size: cover;
    }
    /* Utilize the container for centering the black box */
    .container {
       position: relative;
       /* Update values to fit your requirements. Ensure a specific width and height to prevent element displacement causing layout shift issues */
      width: 100vw;
      height: 100vh;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
    }
    #banner_content{
    background-color: rgba(0, 0, 0, .7);
    min-width: 400px;
    min-height: 400px;
    }


 </style>

<div id="banner_image">
    <div class="container">
        <div id="banner_content">
            
        </div>
    </div>

 </div>

https://i.sstatic.net/8HNNc.jpg

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

A Step-By-Step Guide on Displaying Two Forms with Two Buttons in HTML

My goal is to develop a functionality on a webpage where users can create keys in a database. The user will need to select between two buttons, each button representing a different form to be displayed. The challenge I am facing is being able to utilize o ...

javascripthtmlformsbuttonbootstrap-4

Struggling to Incorporate Bootstrap 4 SCSS into Angular-Cli 1.5

After updating my CLI project to Angular 5/ CLI 1.5, I encountered persistent errors from Bootstrap 4 regardless of my attempts to resolve them. The primary error I'm facing is: ERROR in ./node_modules/css-loader?{"sourceMap":false,"importLoaders":1} ...

angularsassangular-clibootstrap-4css-loader

jquery toggleClass not retaining previous click event

I came across a show/hide function that seemed promising for my issue, which I found here (credit to the original author). Inspired by this, I created a demonstration on JSFiddle (https://jsfiddle.net/q7sfeju9/). However, when attempting to show rows, it d ...

javascriptjquerycssasp.net-mvc

Changing the opacity on hover doesn't seem to be working

I currently have a simple dropdown menu where the different menu choices are supposed to change opacity when hovered over. The default opacity is set at 0.5. Below is the hover function in my jQuery code: $('#cat1 > li > a').hover(functio ...

jquerycss

Using a hashtag in the URL to open an HTML <div> element

I have a website with two tabs labeled as Home and Action. When I hover over the Action tab, the URL changes to include #tab_action: https://i.sstatic.net/OOD5S.png Then, when I click on it, the related tab content opens: https://i.sstatic.net/JdcGG.pn ...

javascriptjqueryhtmlcssurl

Instructions on how to add an ExternalLink to a webpage linking back to the previous page

I'm in the process of creating an error page for my app, and I'm trying to figure out how to add a Wicket ExternalLink that takes users back to the previous page. I believe I need to store the parameters or entire URL of the last visited page, b ...

javahtmlhttpweb-applicationswicket

The type '(params: any) => CSSProperties' does not share any properties with the type 'Properties<string | number>'. Perhaps you meant to invoke it?

Why isn't this property working in react CSS when it is of type CSSProperties? How can I make it work with Properties<string | number>? export const fields: GridFieldsConfiguration[] = [ { ...defaultColDefs, field: &a ...

cssreactjstypescript

PHP: Parsing HTML Tables with Headers and Irregular Body Rows Using Simple HTML Dom Parser

In an HTML table, the data is structured as follows: Header 1 has Row 1, Header 2 has Row 2 and Row 3, while Header 3 has Row 4, Row 5, and Row 6. <table> <thead> <tr> <th>Header 1</th> </tr> </thead& ...

phphtmlparsingsimple-html-dom

Issues with the proper display of Bootstrap 4 in Django are causing problems

I am currently in the process of setting up Django to work with Bootstrap. Despite my efforts, I can't seem to get it functioning correctly and I'm unsure of where I may be making a mistake. Initially, I am just trying to display a panel. You can ...

pythonhtmlcssdjangobootstrap-4

Add the CSS code to the <head> section, even though the CSS styles are located within

According to the analysis from Webpagetest.org, it appears that The CSS for http://mypage.com/howitworks is located in the document body: The link node for http://mypage.com/design_header.css should be relocated to the document header. The design_header ...

phphtmlcss

Switching the image backdrop with an assortment of pictures

I am working with a structure that looks like this: <div class="container"> <ul> <li> <img> </li> </ul> </div> Currently, there is a background image set for the main container. My go ...

javascripthtmlcss

adjusting the size of the sidebar at the top to ensure that it does not overlap the top menu

I have a sidebar on my page that opens vertically when I click a button. The sidebar covers the company logo and name, so I want to make it smaller. Here is the code for the sidebar: <body> <nav class="navbar navbar-dark bg-dark" ...

javascripthtmlcssflexbox

The Bootstrap menu is having trouble collapsing properly

We're currently in the process of constructing a website using bootstrap, but we've encountered an issue with the menu bar. Upon visiting , you'll notice that the top menu functions properly and collapses perfectly when viewed on mobile dev ...

htmlcsstwitter-bootstrap

Insert a fresh item to the end of the scrollable container

My goal is to dynamically add a div to the bottom of another div by using a JavaScript button click event. However, I have encountered an issue where once the outer container reaches its maximum height, the list no longer scrolls to the bottom after adding ...

javascripthtmlcss

"Utilizing jQuery's .ready function to determine the height of an

Although it may seem like a simple question, I've encountered an issue with jQuery. Every time I try to get the height of an element within a .ready function, the value returned is always zero. $(function() { $('#my-elem').height() // Alw ...

javascriptjqueryhtml

Why doesn't the WordPress Genesis child-theme inherit the parent CSS styles?

I am new to using the Genesis framework and I find myself confused about its child themes. The Genesis theme comes with its own stylesheet, but in order to use Genesis, you need to install a child theme. However, the child themes I have come across (such ...

csswordpressgenesis

Registration form creation with file input type resulting in a database storing null values

When submitting my registration form, all entered values except the input type=file are being saved in the database. The file input returns a null value of "0" in the database, even though a file path is chosen from the desktop. I'm trying to figure o ...

phphtmlmysqli

Ways to add vertical dimension to an image without distorting it

I'm dealing with an image that has a very high resolution. I've managed to set the width to 100% without any issues, but I'm struggling to find a way to set the height without stretching the image. Here's my HTML: <div class="conta ...

htmlcss

A tutorial on how to create the appearance of disabled buttons that look the same as enabled buttons through the use

My button includes a text field that is constantly disabled. I would like for the text field to appear as bright as it does when the button is enabled. After disabling the button, they both appear dimmer compared to others and the text field follows suit ...

javascriptjqueryhtmldom

jsoup - locate element and delete it along with the element preceding it

In my Android app, I am working on extracting data from a stock market historical prices table. However, there are certain rows in the table that need to be removed for clarity. Specifically, I am trying to remove a row in the third tr. I have managed to r ...

androidhtmljsoup