Positioning Text Over Image (HTML,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="Sample Image"/>
</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="Sample Image" id="header-img" />
        <p class="text-header">Make it possible!</p>
</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 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>

Placing text over multiple images

Here you go

JSFiddle

You need to set the parent element to be position: relative, so it's relative to the absolute positioned element, in this case the text.

This centers the element horizontally and vertically:

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

Also you need to apply z-index in order for the text to appear above the image.

.ml-4 {    position: relative;}
.imgText.m-auto {    position: absolute;    top: 50%;    left: 50%;    transform: translate(-50%, -50%);    z-index: 10;}
<!doctype html>
<html lang="en"> <head>  <meta charset="utf-8">  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Nerd Arcadia</title>  <meta name="description" content="">  <meta name="author" content="">    <style>   /* The side navigation menu */   .sidenav {    height: 100%; /* 100% Full-height */    width: 0; /* 0 width - change this with JavaScript */    position: fixed; /* Stay in place */    z-index: 1; /* Stay on top */    top: 0; /* Stay at the top */    left: 0;    background-color: #111; /* Black*/    overflow-x: hidden; /* Disable horizontal scroll */    padding-top: 60px; /* Place content 60px from the top */    transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */   }
   /* The navigation menu links */   .sidenav a {    padding: 8px 8px 8px 32px;    text-decoration: none;    font-size: 25px;    color: #818181;    display: block;    transition: 0.3s;   }
   /* When you mouse over the navigation links, change their color */   .sidenav a:hover {    color: #f1f1f1;   }
   /* Position and style the close button (top right corner) */   .sidenav .closebtn {    position: absolute;    top: 0;    right: 25px;    font-size: 36px;    margin-left: 50px;   }

   /* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */   @media screen and (max-height: 450px) {    .sidenav {padding-top: 15px;}    .sidenav a {font-size: 18px;}   }      /* SPACING FOR PICTURES ON SMALLER SCREENS */      @media screen and (max-width: 420px) {        .imgList {margin-top: 25px;}      }            .imgText {        position: absolute;        z-index: -1;      }            .imgList {        z-index: -2;      }        </style>      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">   </head>
 <body>    <div id="mySidenav" class="sidenav">   <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>   <a href="#">About</a>   <a href="#">Services</a>   <a href="#">Clients</a>   <a href="#">Contact</a>  </div>
  <div class="nav">   <span id="navButton" style="font-size:30px;cursor:pointer" onclick="openNav()">☰</span>
            <img id="logo" class="justify-content-center m-auto" src="https://via.placeholder.com/200x100">   </div>
    <div class="row justify-content-center mt-3">      <div class="ml-4 imgList">        <img src="https://via.placeholder.com/200x200">        <div class="imgText justify-content-center m-auto">          test text        </div>      </div>      <div class="ml-4 imgList">        <img src="https://via.placeholder.com/200x200">        <div class="imgText justify-content-center m-auto">          test text        </div>      </div>    </div>

  <script>   function openNav() {    document.getElementById("mySidenav").style.width = "250px";   }
   function closeNav() {    document.getElementById("mySidenav").style.width = "0";   }  </script>

  <!-- jQuery library -->  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <!-- Popper JS -->  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <!-- Latest compiled JavaScript -->  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>    </body></html>

Positioning text over scalable image

You can greatly simplify your CSS:

  1. Remove the flex (unless there is some specific reason you need it).
  2. Wrap the text you want centred vertically in a div and translateY(-50%).
  3. Make sure the wrapper around the image has position:relative.

#hero-container {  position: relative;}
#center-text {  z-index: 100;  position: absolute;  color: white;  font-weight: bold;  left: 15%;  top: 50%;  transform: translateY(-50%);}  #text {  font-size: 3vw;  margin: 0;}    #text2 {  font-size: 2vw;  margin: 0;}    #hero-container img {  width: 100%;  height: auto;}
<div id="hero-container">  <img class="hero" src="https://vreauperle.ro/images/banners/hero-image.jpg" />  <div id="center-text">    <p id="text">      First text here    </p>    <p id="text2">      Secondary    </p>  </div></div>

Related Topics

Add Text Above HTML5 Video

What Does It Mean When The Form Action Attribute Is "#" (Number/Pound Symbol/Sign/Character)

How to Set Gaps (Gutters) in a Flex Container

Resizing Svg in HTML

Why Use a Sprite Sheet Rather Than Individual Images

How to Select Multiple Elements in The Chrome Developer Tools Elements Panel

How to Remove X and Y on Submit in HTML Form with Image Type Button

What's The Point of Valid CSS/HTML

Text Floating in Block Next to Image

3D Carousel Effect

<Img> Vs <Image> Tag in HTML

Where Is The Default Size of a Div Element Defined or Calculated

Gmail Displaying Gaps Between Images

How to Play Shoutcast Internet Radio Streams with HTML5

Put Search Icon Near Textbox Using Bootstrap

Text Wrapping Around an Absolute Positioned Div

Number Input - Always Show Spin Buttons

How to Make a HTML Page to Show Content from Another Url


Leave a reply



Submit