How to Put Text Over an Image Without Absolute Positioning or Setting The Image as Backbround

How to put text over an image without absolute positioning or setting the image as backbround

I used to pull stunts like this all the time as soon as tables came. Really ugly, and may seriously embarrass any validator you run it trough: overlapping table cells. Works in most browsers though and even without css.

Example:

<table>    <tr>    <td></td>    <td rowspan=2><img src="//i.stack.imgur.com/XlOi4.png"></td>  </tr>    <tr>    <td colspan=2>This is the overlay text</td>  </tr>  </table>

Text over image without absolute position

The problem is not the absolute positioning, it's how you center the text. The text in the paragraph will be centered, but that has no effect as the paragraph has the same width as the text. When you make the paragraph absolutely positioned it no longer gets its width from its parent.

You can make the parent the same width as the image, and the paragraph the same width as the parent, and then center the text inside the paragraph. Example:

div {
  position: relative;
  width: 300px;
}

p {
  position: absolute;
  left: 0;
  bottom: 20px;
  width: 100%;
  text-align: center;
  color: #fff;
}

<div>
  <img src="http://placekitten.com/300/200">
  <p>text</p>
</div>

Div over image without absolute positioning

You can use image as background of your section

.karte {  background: url('img/home/stalden.png');}

<div class="karte">  <h1>STALDEN</h1></div>

Put text over image without 'position: absolute;' and wrap it to fit compartment in CSS grid

When working with position: absolute , use position: relative; on the parent container to make the child element use the parent as it's positional reference (position: relative and position: absolute summary here). Also, added .box p { text-align: center }

.grid-container {
  display: grid;
  grid-template-columns: repeat( auto-fit, minmax(18vw, 1fr) );
  grid-auto-rows: minmax(35vh, 1fr);
  gap: 20px 20px;
}

.box {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity:0.85;
  background: green;
  color: #efefef;
  font-size:2em;
  border-radius:10px;
  transition: all 0.3s linear;
}

.box img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
  opacity: 0.6;
  filter: brightness(0) invert(1);
}

.box p  {
  position: absolute;
  font-size: calc(12px);
  font-weight: bold;
  text-align: center;
}

<div class="grid-container">
  <a href='link' class="box">
    <img src="src/img.png"/>
    <p>TEXT</p>
  </a>
  <a href='link2' class="box">
    <img src="src/img2.png"/>
    <p>ANOTHER TEXT that is much longer to show that you can center the text.</p>
  </a>
  ...
</div>

text over image without using relative position or negative margins

You need to align the image on the top in <td> element, because its default is middle. That is why it is being aligned that way and giving space above and below.

So, add vertical-align: top to <td> element.

td {
  vertical-align: top;
}

Positioning text over an image so that it always points to the same spot in the image even when resizing the browser

You create a parent wrapper, put inside the image and all the divs.
the parent is relateive and the divs are absolute.

here's a small demo.

* {
  box-sizing: border-box;
  margin: 0;
}

img {
  max-width: 100%;
  display: block;
  width: 100%;
}

.parent {
  position: relative;
}
.parent .box {
  position: absolute;
  width: calc(1.6vw + 10px); height: calc(1.6vw + 10px);
  border-radius: 50%;
  background-color: #fff;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-align: center;
          align-items: center;
}
.parent .box.window {
  top: 0;
  left: 39%;
}
.parent .box.light {
  top: 16%;
  left: 46%;
}
.parent .box.pool {
  top: 90%;
  left: 50%;
}
.parent .box.plant {
  top: 55%;
  left: 3%;
}

<div class="parent">
  <div class="box plant">1</div>
  <div class="box window">2</div>
  <div class="box light">3</div>
  <div class="box pool">4</div><img src="https://images.pexels.com/photos/4075088/pexels-photo-4075088.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="Sample Image"/>
</div>

---

Related Topics