Text on Top of Image CSS

How to position text over an image with CSS

How about something like this: http://jsfiddle.net/EgLKV/3/

Its done by using position:absolute and z-index to place the text over the image.

#container {  height: 400px;  width: 400px;  position: relative;}#image {  position: absolute;  left: 0;  top: 0;}#text {  z-index: 100;  position: absolute;  color: white;  font-size: 24px;  font-weight: bold;  left: 150px;  top: 350px;}

<div id="container">  <img id="image" src="http://www.noao.edu/image_gallery/images/d4/androa.jpg" />  <p id="text">    Hello World!  </p></div>

image over text

Did you try to put your text div in position absolute ? It's inside the relative div...

<div style="position: relative; left: 0; top: 0;">
    <img src="Images/img1.png" style="position: relative; top: 0; left: 0;" />
    <img src="Images/img2.png" style="position: absolute; top: 10px; left:450px;" />
    <img src="Images/img3.png" style="position: absolute; top: 0px; left:720px;" />
    <div style="position:absolute;top: 0px; left:720px;">
        Home<br />
        contact<br />
    </div>
</div>

How to put text on top of image?

You just need position: relative; on your .destination-photo

Your Text is placed on an absolute position. Since you don't have a relative position, the images are placed absolutely to the document. Adding position: relative to the image would give the p tags a position to start with.

Using CSS to overlay text on top of images

Take a look a this fiddle to see if it's what you want. The text is overlaping the picture's text but you can change the picture any way.

I simplified a bit your HTML. You'll have to put the rest that is missing after.

But the main changes is the table layout and the removed image from the HTML and added it on the CSS. Here is a sample of the fiddle

<table id='blokken'>
    <tr>
        <td>
            <a href='#'><p>placeholder 1</p></a>
        </td>
    </tr>
</table>

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>

How to overlay image in HTML over text in CSS

Use z-index, position: relative; and position: absolute;.

Here is your HTML:

<body>
   <img src="" id="image" style="width:270px;height:270px;"/>
   <img src="" id="image1" style="width:270px;height:270px;"/>
   This is a text!
</body>

Then add CSS:

img {
   position: relative;
   z-index: 1;
}

div {
  position: absolute;
  top: 0px; //To see the difference
}

CodePen: https://codepen.io/marchmello/pen/ExjqGYQ

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>