How to Center a (Background) Image Within a Div

How to center a (background) image within a div?

#doit {
    background: url(url) no-repeat center;
}

Center div with background image in page

Your div is already in the center. Since the width of div is larger than image and you used background-size:contain, so it's not appearing as it should be.

You can use:

background-position: center;

background-size:cover;

Else you can also reduce the width of your inner div.

<html>
<head>
    <style>
        .flex_container {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
        }

        .inner {
            height:300px;
            width: 400px;

            background-image: url('https://effortcatalyst.online/matrix_bg.png');
            
            background-size: cover;
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>
</head>
<body>
  <div class="flex_container">
     <div class="inner">
        <h1> Some text in the center </h1>
     </div>
  </div>
</body>
</html>

Centering a background image inside a div

Looking at your provided URL I saw that positioning the background-image is indeed positioned more towards the top due to the fact the bgimage is larger than the div itself. Therefore you need to play with the percentages.

background: url("images/background.png") no-repeat 50% 18.5%;

Could solve your problem and place the image in the center of you div

Center image inside a div like setting background position

You could use transform: translate

.image-wrap {  position: relative;  height: 400px;  text-align: center;  border: 1px dashed gray;}.image-wrap img {  position: relative;  top: 50%;  transform: translateY(-50%);}

<div class="image-wrap">  <img src="http://placehold.it/200" alt="some image here"/></div>

css - fit all content inside a div, center background image

HTML

<div class="root">
  <div class="subroot">
    <div class="container">
      <div class="square bg"></div>
    </div>
    <div class="passage">
      <p>Hello world!</p>
    </div>
  </div>
</div>

CSS

.root {
  width: 70%;
  margin: auto;
  border: 2px solid yellow;
  background-image: url('http://baconmockup.com/600/400');
  background-size: cover;
  background-position: center;
}

.subroot {
  background-color: rgba(0, 0, 0, 0.7);
}

.container {
  border: 2px solid black;
  width: 100px;
  margin: auto;
}

.square {
  border: 2px dotted red;
  padding-bottom: 100%;
}

.bg {
  background-image: url('http://placehold.it/200x300');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 50%;
}

.passage {
  border: 2px dotted green;
  width: 80%;
  margin: auto;
  text-align: center;
  white-space: nowrap;
  overflow: scroll;
  color: white;
}

Problem solved.

Problem solved

How to properly center the background image within the current bootstrap template

You can make it fit the browser window with the below css style.

.main-content {
    background-image: url(/images/login.jpg);
    background-size: cover;
}

Result:

Sample Image

centering a div on background image which has 100vh as height

If I understand correctly, you are saying that the content is centered horizontally by default, but that the div needs a height: 100% to center the content vertically.

Divs are block elements, which means that, by default:

They take up the entire width of the screen
They only take up as much height as is needed to display their content (they have a default height of auto).

If your div is a flexbox with the content centered, even if the content is centered vertically, the div will still only expand downwards as far as it needs in order to fit the tallest element inside of it. Since the div is still at the top of the screen, even if its content is centered vertically inside the div, the content will appear at the top of the screen because the div is only as tall as the content and because the div is at the top of the screen.

However, the height: auto default property of divs can be overridden. If you set the height to 100%, you force the div to be 100% of the height of its parent element, the page. The div would then have a bunch of extra space for the content, and due to the flex rule, it would position the content in the vertical center of that extra space.

To understand this further, you can try adding border: 5px dashed black to the div so you can see its size and position, and then using different values for height, like unset, 100%, 50%, etc. Experiment and play around!

How do I vertically center a div within a div covered by a background image?

You could use flex or grid - like

.table-art {
  background-image:url("../img/table-decorated1.jpg");
  background-size: cover;
  width: auto;
  height: 500px;

  /* center items */
  display: grid;
  place-items: center;
}

.box-test {
  border: 5px solid red;
  width: 150px;
  height: 50px; 
  margin: auto;
}

How to Center a (Background) Image Within a Div