Responsive center image and text with background

Question

**EDIT: I have already been able to center the div with text and image but I want the background of the div to be full width. I can't make the logo and full width div with background and text align to center of body(responsive)

**EDIT 2: This is what I am trying to achieve: enter image description here

I have tried placing the div inside the logo's div since it is already in center

Snippet:

body {
  background-image: url('https://source.unsplash.com/random');
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  margin: 0;
}

div.container {
  position: absolute;
  top: 50%;
  left: 50%;
  overflow: visible;
}

img.logo {
  position: relative;
  max-width: 100%;
  max-height: 100%;
  margin-top: -50%;
  margin-left: -50%;
}

#text-container {
  background-color: rgba(0, 0, 0, 0.6);
}

#title-text {
  text-align: center;
  padding: 20px;
  color: #f09020;
  font-size: 1.5em;
  font-weight: 600;
  font-family: 'Source Sans Pro', sans-serif;
}

.sub-text {
  color: white;
  font-weight: 100 !important;
  font-size: 15pt;
  font-family: 'Open Sans Condensed', sans-serif;
}

<body>

  <div class="container">
    <img class="logo" src="http://placehold.it/300x200?text=Logo" />
  </div>

  <div id="text-container">
    <p id="title-text">CONSTRUCTION IN PROGRESS <br/><br/>
      <span class="sub-text">WE ARE CURRENTLY BUILDING EXCITING PROJECTS FOR YOU,<br/></span>
      <span class="sub-text">PLEASE CHECK BACK AGAIN SOON FOR OUR NEW AND IMPROVED WEBSITE.</span>
    </p>
  </div>
</body>

I want both logo and div with text on the center of body. Placing div under logo.

Possible duplicate of Center a DIV horizontally and vertically — Anurag Srivastava
@adel I am so sorry for that, I edited my question and added an image link as to what I want to achieve. — TchMcy

Kareem Dabbeet Kareem Dabbeet · Accepted Answer · 2019-08-01T18:19:39

You can use flexbox property instead of positioning absolute,relative.

in body flex is used to position the img and text containers horizontally.

body {
   display: flex; // so that it's content can be centered;
   height: 100vh; // To make it fit the whole screen 
}

then I've added center div which contained the containers:

.center { 
      margin: auto;
      width: 100%; // to be full width
    }

body {
background-image: url("https://cdn.pixabay.com/photo/2016/06/17/06/04/background-1462755_960_720.jpg");
      background-position: center center;
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-size: cover;
      margin: 0;
      display: flex;
      height: 100vh;
    }
    .center { 
      margin: auto;
      width: 100%;
    }
    .container { 
      display: flex;
    }

    img.logo {
      position: relative;
      max-width: 128px;
      max-height: 128px;
      margin: auto;
    }

    #text-container {
      background-color: rgba(0, 0, 0, 0.6);
    }

    #title-text {
      text-align: center;
      padding: 20px;
      color: #f09020;
      font-size: 1.5em;
      font-weight: 600;
      font-family: "Source Sans Pro", sans-serif;
    }

    .sub-text {
      color: white;
      font-weight: 100 !important;
      font-size: 15pt;
      font-family: "Open Sans Condensed", sans-serif;
    }

<div class="center">
        <div class="container">
            <img class="logo" src="http://ejad.solutions/cloud/elogo.jpg" />
          </div>
      
          <div id="text-container">
            <p id="title-text">
              CONSTRUCTION IN PROGRESS <br /><br />
              <span class="sub-text"
                >WE ARE CURRENTLY BUILDING EXCITING PROJECTS FOR YOU,<br
              /></span>
              <span class="sub-text"
                >PLEASE CHECK BACK AGAIN SOON FOR OUR NEW AND IMPROVED WEBSITE.</span
              >
            </p>
          </div>
    </div>

Responsive center image and text with background

4 Answers