CSS HTML place a white square on an image

Question

I have a div that the entire background of it is an image. In the middle of an image I want to have a white box that has some text in it. I tried with relative position but that stretched out the parent.

Here is my code

<div id="desk-linkedIn-image" style="background: url('img/linkedin/at_desk_linkdenIn_optimization.jpg');width: 100%;">
  <div style="background-color: #FFFFFF; width: 475px; height: 46%;padding-left: 2%;">

    <p style="font-size: 20px;"> Text Text Text</p>
    <p style="font-size: 20px;"> Text Text Text</p>
    <p style="font-size: 20px;">Text Text Text</p>
    </p>
  </div>
</div>

Am I correct in thinking the image has nothing to do with this? It's just a background. — miken32, Sep 13 '17 at 22:28
Possible duplicate of [CSS center text (horizontally and vertically) inside a div block](https://stackoverflow.com/questions/5703552/css-center-text-horizontally-and-vertically-inside-a-div-block) — miken32, Sep 13 '17 at 22:29

Johannes · Answer 1 · 2017-09-13T23:10:05.223

The essential settings for centering an element inside another element (both horizontally and vertically) are always these for the child element:

  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

...plus - depending on the content - width and heightsettings, and position: relative on the parent element. It's also essential that the parent element has a defined height.

html,
body {
  margin: 0;
  height: 100%;
}

#desk-linkedIn-image {
  background: url(http://placehold.it/500x600/fd7) center center;
  background-size: cover;
  width: 100%;
  height: 100%;
  position: relative;
}

.x {
  background: #fff;
  width: 475px;
  width: 50%;
  height: 46%;
  padding-left: 2%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#desk-linkedIn-image .x p {
  font-size: 20px;
}

<div id="desk-linkedIn-image">
  <div class="x">
    <p> Text Text Text</p>
    <p> Text Text Text</p>
    <p> Text Text Text</p>
  </div>
</div>

Note: Another approach is to use flexbox. Still, the method above is also compatible with old browsers, which flexbox isn't.

score 1 · Accepted Answer · answered Sep 13 '17 at 23:03

try giving the child div an absolute position,then a margin left and margin top,something like this

<div id="desk-linkedIn-image" style="background: url('http://knowledgeoverflow.com/wp-content/uploads/2013/03/food_photography_burger_by_masterdev777-d3h1ryk.jpg');width: 100%;height: 100%;" >
      <div style="background-color: #FFFFFF; height: 150px;width:150px;position: absolute; margin-left:600px; margin-top: 215px">

        <p style="font-size: 20px;"> Text Text Text</p>
        <p style="font-size: 20px;"> Text Text Text</p>
        <p style="font-size: 20px;">Text Text Text</p>
        </p>
      </div>
    </div>

score 0 · Answer 3 · answered Sep 13 '17 at 22:26

Try this:

<div id="desk-linkedIn-image" style="background: url('img/linkedin/at_desk_linkdenIn_optimization.jpg');width: 100%; position: relative" >
    <div style="background-color: #FFFFFF; width: 20%; height: 20%; left: 50%; top: 50%; margin-top: -5%;  margin-left: -5%; position: absolute">
        <p style="font-size: 20px;"> Text Text Text</p>
        <p style="font-size: 20px;"> Text Text Text</p>
        <p style="font-size: 20px;">Text Text Text</p>
    </div>
</div>

You might need to play around with the values a bit to find the correct center.

It should work because you can align child items relatively to their parents by specifically setting the parents' position as relative and the child's as absolute.

CSS HTML place a white square on an image

3 Answers3