Member Avatar for eltommyo

Is there anyway i can use CSS or HTML to put a text object on top of a piece of a picture?

  • 3 Contributors
  • 4 Replies
  • 323 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Mike Empuria

Dani AI

Generated

As said, CSS positioning is the right tool and ’s example shows the basic idea. For something that won’t break when the page layout changes, wrap the image in a relatively positioned container and place the text box inside it as an absolutely positioned child. That keeps your offsets tied to the image instead of the whole page, so you can tune placement over the brown area with simple percentage values and the box will scale with the image.

A minimal, modern pattern (adjust left/top/width to match the brown box):

<div class="image-wrap">
  <img src="ghostlypets.jpg" alt="ghostly pets">
  <div class="overlay" role="region" aria-label="Caption">
    Does it work? — put whatever scrolling or static text you need here.
  </div>
</div>

<style>
.image-wrap { position:relative; display:inline-block; }
.image-wrap img { display:block; max-width:100%; height:auto; }
.overlay {
  position:absolute;
  left:18%; top:62%; width:30%;
  max-height:120px; overflow:auto;
  background:rgba(255,255,255,0.85); padding:8px;
  box-sizing:border-box; z-index:10;
}
@media (prefers-reduced-motion: reduce) { .overlay { animation: none; } }
</style>

Tips and cautions: use overflow:auto for a user-scrollable box or a CSS animation for automatic scrolling—if you animate, provide a pause and respect prefers-reduced-motion. If the overlay hides, check that the wrapper is position:relative, the overlay has a higher z-index, and the overlay element comes after the img in the DOM. For precise placement over the brown patch, inspect the image with devtools or a simple image editor to convert pixel offsets to percentages. Finally, keep a non-overlay text alternative for accessibility (screen readers, narrow viewports) so content is always reachable.

Recommended Answers

All 4 Replies

Member Avatar for eltommyo

i want like a scrolling text box over the brown box

Member Avatar for Mike Empuria

You want something like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Text Box</title>
<style type="text/css">
<!--
#textBox {
	position:absolute;
	left:80px;
	top:40px;
	width:94px;
	height:56px;
	z-index:1;
	overflow: scroll;
}
-->
</style>

</head>

<body>
<img src="textbox.jpg alt="Text" />
<div id="textBox">Does it work? </div>

</body>
</html>

Your image was not available so I couldn't put in the proper co-ordinates for the textBox layer but I'm sure you can sort it out.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.