How to Position Text Over an Image With 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>

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=""/>
</div>

Position text over an image in css

Try this instead,

add this style to img

#header-img{width:100%;height:auto;}

if you align text in center by

.text-header{
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

#header-container {
  max-height: 800px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#header-img{width:100%;height:auto;}
.text-header {
  position: absolute;
  font-family: "Gayathri", sans-serif;
  font-weight: 1000;
  top: 50%;
  left: 50%;
  color: white;
  font-weight:800;
  font-size: 30px;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

<div class="header-container">
   <img src="https://media.sproutsocial.com/uploads/2018/04/Facebook-Cover-Photo-Size.png" alt="" id="header-img" />
        <p class="text-header">Make it possible!</p>
</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>

Position text in a CSS grid over an image

You need to set parent position:relative and set the position:absolute for the div which you want to place at bottom-left.

Note: Your Html and css classes doesn't match. You need to correct them. Below is the working snippet

.sbp-item12 {  grid-row: 6 / 7;  grid-column: 9/13;  height: 250px;}
figure {  margin: 0;  position: relative}
.bottom-left h3{  z-index: 100;  position: absolute;  color: black;  font-size: 24px;  font-weight: bold;  left: 0;  bottom: 0;  margin:0}

<div class="sbp-item12">  <a href="#">    <figure>      <img src="https://placehold.it/380x250">      <div class="bottom-left">        <h3>Here is a headline</h3>      </div>    </figure>  </a></div>

How to Position Text Over an Image With Css