(CSS) How Position Text (With Background Color) Over <Img> Tag Without Absolute Positioning

(CSS) How position text (with background color) over img tag without absolute positioning

I see no reason not to use position: absolute.

See: http://jsfiddle.net/NeaR4/

CSS:

.container {
    border: 2px dashed #444;
    float: left;
    position: relative
}
.container img {
    display: block
}
.container > div {
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    height: 14px;
    background: #000;
    background: rgba(0,0,0,0.7);
    color: #fff;
    overflow: hidden;
    font: bold 14px Arial, sans-serif;
    padding: 5px;
}
.container:hover > div {
    height: auto
}

HTML:

<div class="container">
    <img src="http://dummyimage.com/230x180/f0f/fff" />
    <div>some text with line oneeee, line twoooooooo ooooooo , line three</div>
</div>

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>

How do I position a div with a colored background over a preceding image?

I think its best if you position the div not the p like so:
(also generaly try to avoid positioning absolute if you do not have to)

img {  max-width:100%;  height: auto;  margin: auto;  }.card {  max-width: 320px;  margin: auto;  }
.card__tag{  z-index: 1;  position:relative;  top: -3rem;}.card__tag p{  background: blue;  color: lime;  padding: 0.25rem;}

<div class="card">  <div class="card__image">    <img src="//placehold.it/1024x768" alt="Sample Image">  </div>  <div class="card__tag">    <p>Image Tag</p>  </div></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>

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>

HTML Image Overlay Positioning

Use relative and absolute positioning to place the background image and the img on top of each other, than make the container a flexbox to center the img tag:

.container {  height: 500px;  width: 700px;  display: flex;  align-items: center;  justify-content: center;  position: relative;}
.container > #backimg {  background-image: url(http://placekitten.com/700/500);  background-position: center center;  background-size: cover;  filter: blur(3px);  width: 100%;  height: 100%;}
.container > img {  width: 50%;}
.container > #backimg,.container > img{   position:absolute;}

<div class="container">  <div id="backimg"></div>  <img src="http://placekitten.com/700/500" /></div>

Positioning text over image (html,css)

You have a bunch of different options you can make use of, each with its pros & cons and with a difference in browser support:

1. Flexbox: (support)

Flexbox is the simplest option you have, without using tables or having to get your elements out of the document flow, but it's not as widely supported as other viable options. I trust it will be soon enough.

Code:

/* --- CSS --- */.background {    height: 10em;    display: flex;    align-items: center;    justify-content: center;    background-size: cover;    background-position: center;}
.background > h4 {    color: #000;    font-size: 2em;    font-family: sans-serif;}

<!--- HTML ---><div class = "background" style = "background-image: url(https://images.freecreatives.com/wp-content/uploads/2015/05/HD-Vintage-Photography-Wallpaper.jpg);">  <h4>Hello, world!</h4></div>

---

Related Topics